- This topic has 17 replies, 2 voices, and was last updated 8 years ago by Mupa.
-
AuthorPosts
-
April 10, 2016 at 5:00 pm #89160MupaParticipant
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 #89162MaheshKeymaster@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,
MaheshApril 10, 2016 at 6:47 pm #89163MupaParticipantHm, 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 #89197MaheshKeymaster@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,
MaheshApril 11, 2016 at 10:52 pm #89271MupaParticipantThis 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 #89342MaheshKeymaster@mupa: Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:
#content .wrapper .widget { padding: 0; }
Regards,
MaheshApril 12, 2016 at 8:37 pm #89376MupaParticipantThis 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 #89522MaheshKeymaster@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,
MaheshApril 15, 2016 at 1:37 am #89544MupaParticipantThanks 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 triedarticle.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
MupaApril 22, 2016 at 3:12 am #90127MupaParticipantAny ideas? Btw, i bought the Pro version to support the great work of the Catch Themes team.
April 22, 2016 at 9:29 am #90137MaheshKeymaster@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,
MaheshApril 22, 2016 at 1:26 pm #90146MupaParticipantPlease 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 #90156MaheshKeymaster@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,
MaheshApril 23, 2016 at 12:32 am #90187MupaParticipantYeah, 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 #90267May 2, 2016 at 10:12 pm #90879MupaParticipantOne 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 #90918MaheshKeymaster@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,
MaheshMay 3, 2016 at 9:42 pm #90957MupaParticipantThis works perfect, thanks a lot.
-
AuthorPosts
- The topic ‘reduce margin/padding in mobile mode’ is closed to new replies.