Padding or margins on mobile/not full width + horizontal scroll

Hi,

I searched the forum but didn’t find a working solution for my site. Sorry if I’m duplicating a topic.

I have 2 problems:

1- The site works fine on desktop, the main picture is full width, but on mobile I have padding or margins on the main picture (left and right). I would like to have the main picture full width while maintaining padding on the text and secondary pictures.

2- The site scrolls horizontally showing either a red or white background, this is most visible on mobile. I would like to disable this horizontal scroll.

My site is: Native Surfhouse

Could you please help with these 2 issues?

Thank you in advance,

Tom

I fixed the horizontal scroll problem with this code:

html,
body{
overflow-x: hidden;
}

The problem of the padding remains, it’s on Crelly Slder, the slider is full width on Desktop but has padding/margins on mobile. Could you please help with this issue?

Best,

Tom

When I change these padding values to 0px the main picture/Crelly Slider is full width BUT the rest of the site looses it’s padding/margins. This is the closest I got to fixing my problem but it’s not working 100% yet. Help would be greatly appreciated.

.panel-grid-cell {
padding-left: 0px !important;
padding-right: 0px !important;
margin-bottom: 0px !important;
}

Thank you,

Tom

Is anyone there? Could someone help me please?

Hello there,

Regarding to padding issue; Your homepage looks fine. Could you please share me the specific URL where I can see the problem on?

Regards,
Kharis

Hi, thank so much for your reply!

The problem is visible only on mobile (I have an iPhone 6). The home page is fine, but all the other pages (from the main menu) have a padding/border around the main image (first big image under the menu).

You can see it on all the pages, but here is an example : http://nativesurfhouse.com/the-village/

Thank you!

Tomasz

Hello there,

Thank you for the followup! It helped me a lot. Please try adding the below custom CSS code into your site’s additional CSS option (Appearance > Customize > Additional CSS).


@media only screen and (max-width:780px){
  .panel-grid-cell .crellyslider-slider{
    width: calc(100% + 30px) !important;
    width: -webkit-calc(100% + 30px) !important;
    width: -moz-calc(100% + 30px) !important;
    margin-left: -15px;
  }
}

Let me know how it goes.

Regards,
Kharis

IT WORKS!!!

Thank you so much :slight_smile:

All the best!

Tomasz

You’re most welcome!

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