reduce margin/padding in mobile mode

This topic has 17 replies, 2 voices, and was last updated 8 years, 7 months ago by Mupa.

Viewing 18 posts - 1 through 18 (of 18 total)

Author

Posts
April 10, 2016 at 5:00 pm #89160

Mupa
Participant

Which margin/padding do i have to change, so that the space on the left/right side of the whole side is being reduced especially in mobile mode?

April 10, 2016 at 5:34 pm #89162
Mahesh
Participant
@mupa: Do you mean for content area in mobile devices? Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:
```
@media screen and (max-width: 767px) {
    article.hentry {
        padding: none;
    }
}
```
Regards,
Mahesh
April 10, 2016 at 6:47 pm #89163

Mupa
Participant

Hm, this changes nothing. I mean the white space on the left and right side for the whole page in mobile mode.

April 11, 2016 at 12:32 pm #89197
Mahesh
Participant
@mupa: Sorry, my mistake, got little mixed up with codes. Use the following CSS:
```
@media screen and (max-width: 767px) {
    article.hentry {
        padding: 0;
    }
}
```
Regards,
Mahesh
April 11, 2016 at 10:52 pm #89271

Mupa
Participant

This works fine for the articles, but what about the widgets?
And there is some white space left. Is there another “outer” space which has padding/margin as well?

April 12, 2016 at 3:02 pm #89342
Mahesh
Participant
@mupa: Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:
```
#content .wrapper .widget {
    padding: 0;
}
```
Regards,
Mahesh
April 12, 2016 at 8:37 pm #89376

Mupa
Participant

This works perfect except in landscape mode. There you don’t have only one article after another, but two articles side by side without margin/padding.

And second thing: There is a little space left on both sides. Is this a browser issue, or is there another element left with margin/padding? I saw websites where you have a little bit more then no margin/padding on the left/right side in mobile mode. And i want to use as much space as possible, so i need that as as well.

Third thing: Is it possible to show all pictures of articles (preview picture and pictures in articles) with no margin/padding like the header picture or the slideshow picture in mobile mode?

April 14, 2016 at 9:22 pm #89522
Mahesh
Participant
@mupa: Use the following CSS:
```
@media screen and (max-width: 767px) {
    article.hentry {
        padding: 0;
    }
    #page .wrapper {
        padding: 0;
    }
    article.hentry .featured-image img {
        width: 100%;
    }
}
```
Regards,
Mahesh
April 15, 2016 at 1:37 am #89544
Mupa
Participant
Thanks again for your great support until now. It’s nearly perfect now.
I don’t know if the last thing is possible: I only want the featured images with no margin/padding, the text can have a little bit padding. I tried
```
    article.hentry {
        padding: 10px;
    }
```
which makes the article padding perfect, but now it doesn’t matter if
```
article.hentry .featured-image img {
        width: 100%;
    }
```
is 100% or not. The padding for the featured image has a padding of 10 px as well.

Is it possible to only give the featured image no margin/padding?

Kind regards
Mupa
April 22, 2016 at 3:12 am #90127

Mupa
Participant

Any ideas? Btw, i bought the Pro version to support the great work of the Catch Themes team.

April 22, 2016 at 9:29 am #90137

Mahesh
Participant

@mupa: Sorry for the late reply. Thank you for using Catch Adaptive Pro. Can you please clarify more with an image as an example.

Regards,
Mahesh

April 22, 2016 at 1:26 pm #90146

Mupa
Participant

Please have a look on http://m.sport1.de/us-sport/nba/2016/04/golden-state-warriors-verlieren-ohne-stephen-curry-bei-houston-rockets in mobile mode.
All pictures have no margin/padding except the article text.
It’s important to watch this with a smartphone or Google Chrome in mobile mode cause the site would switch to the desktop version instead.

April 22, 2016 at 3:52 pm #90156
Mahesh
Participant
@mupa: Please use the following CSS.
```
article.post {
    padding: 0;
}
article.post .entry-container {
    padding: 15px;
}
```
Do you mean to make like this?
Let me know further.

Regards,
Mahesh
April 23, 2016 at 12:32 am #90187

Mupa
Participant

Yeah, this is perfect now for featured images. But is it possible to give images which i have included in an article itself zero margin/padding as well?

April 24, 2016 at 11:51 am #90267

Mahesh
Participant

@mupa: I’m afraid this is not possible.

Regards,
Mahesh

May 2, 2016 at 10:12 pm #90879

Mupa
Participant

One question regarding that topic:
Is it possible to just increase the bottom padding/margin of the Featured Slider? Otherwise i have no space between the Featured Slider and the image of the last post if i open the site with a smartphone in portrait mode.

May 3, 2016 at 12:06 pm #90918
Mahesh
Participant
@mupa: Please use the following CSS:
```
@media screen and (max-width: 400px) {
    #feature-slider {
        margin-bottom: 20px;
    }
}
```
Note: Adjust the margin-bottom as per required.

Regards,
Mahesh
May 3, 2016 at 9:42 pm #90957

Mupa
Participant

This works perfect, thanks a lot.
Author

Posts