Remove padding in mobile view

Sparkling
1

Hello,

In the mobile view, all content is padded from the border of the white-space. The featured image however, does not have such padding. Is it possible to create a code such that all media files are also not padded, so that the edges of the media files are in line with the border, just like the featured image?

In addition, is there a way to reduce the amount of space between the edges of the mobile view and the white part of the template? This refers to the greyish background that is in between the edges of the mobile view and the white part (where the content is on).

Thanks!

Regards,
Jeremy

2

Hi Jeremy,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

.container.main-content-area {
    padding: 0;
}

Best Regards,
Movin

3

Hello Movin,

Thank you for your help! The code has eliminated the greyish background between the edges of the screen and the white area for content for each post. However, within the white area for content, the media files still have a padding from the edges of the mobile screen, in the same way as the text. Only the featured image is flushed from edge to edge of the mobile screen.

Is there a code that will also flush all other media files from edge to edge of the mobile screen?

Thank you!

Regards,
Jeremy

4

Hi there,

I hope you are having an awesome day and thanks for contacting us regarding your query.

For this, I’ll have to take a closer look on your site at the actual elements and provide you with some more specific CSS. Kindly provide me with a link to a page with this so that I may be able to write up some CSS that should work for your setup.

Looking forward to your reply :slight_smile:

Best Regards,
Support

5

Hello,
Here’s my website:
https//www.walkingworlds.com/
Thanks!
Regards,
Jeremy

6

Try achieving it using following custom CSS code.


@media (max-width: 992px){
    .entry-content img.size-full {
    margin: 0;
    position: relative;
    left: -26px;
    max-width: 108%;
    width: 108%;
}
}

@media (max-width: 592px){
    .entry-content img.size-full {
    max-width: 113%;
    width: 113%;
}
}
7

Hello,

Thank you so much for the code!
It works only on one side of the screen though. The left side of the media files is now flushed to the edge of the screen, but the right side is not. Also, the greyish background area on the right side of the screen has reappeared. Hopefully there’s a fix!

Regards,
Jeremy

8

Could you please share the screenshot of it?

9

Hello Movin,

I have attached two screenshots. The first is the default view of the page on a mobile device. The second is the view if you swipe the page all the way to the left. In both screenshots the image is flushed to the screen on the left edge, but not on the right.

Thanks in advance!

Regards,
Jeremy

10

Hi there,
Thanks for keeping in touch with us.

Kindly add and save the following code to Appearance > Customize > Additional CSS:

@media(max-width: 550px){
.col-md-8, .col-sm-12{
padding-right:0px!Important;
}}

@media(max-width: 550px){
div#footer-area {
width: 104%!Important;
}}

I hope this helps :slight_smile:

Best Regards,
Support

11

Thanks so much for all your help thus far!

The media files are now flushed from edge to edge of the mobile screen in default view. I have included all three snippets of code that you have suggested in the thread. With this combination however, there are a few problems:

  1. In desktop view, the width of the featured image is smaller than that of the white content area.
  2. In desktop view, the paragraphs are not aligned with the images. They start to the left of the images.
    I believe problems 1 and 2 are caused by .container.main-content-area { padding: 0; } but I’m not sure how to rectify it.
  3. In mobile view, you can still swipe to the left. By doing so, you still see a white area in between the media file and the right edge of the screen. Is there a way to resize the page such that the width of the page fits nicely with the screen and you cannot swipe left/right?

Thanks again!

Regards,
Jeremy