How can I adjust padding for pages on mobile

I adapted the padding for my pages in full width with the help of this friendly supplied code:

    .page-template-page_fullwidth .container.content-wrapper {
        padding-top: 50px;
        padding-right: 100px;
        padding-bottom: 50px;
        padding-left: 100px;
    }

Works perfect, except that now on a mobile phone there is way too much white left and right.

Is there an additional code I can use too make sure the adapted pages have smaller paddings on a mobile phone?

Or is there an alternative code to give pages on screen more padding without affecting the display on mobile phones?

Thanks again for your help!

Jos

Hello there,

To apply special style on specific screen sizes, you can use CSS media query. For example:

  .page-template-page_fullwidth .container.content-wrapper {
    padding-top: 30px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 20px;
  }

Regards,
Kharis

Hi Kharis,

You gave me that code before and I’m using it.

My question was: when using that code, is there a way to keep a page on full width for small screens?

I appreciate your help with that.

Jos

Sorry, I posted to soon. Try this:

@media only screen and (max-width: 800px) {

  .page-template-page_fullwidth .container.content-wrapper {
    padding-top: 30px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 20px;
  }
  
}

Regards,
Kharis

Hi Kharis,

The part for small screens doesn’t work. But I found out when I put in the original code all paddings on 50px the result is just fine for large ánd small screens.

Problem solved. Thanks!

Jos

You’re welcome Jos!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis