Docs

[ampescod]

Hello, I’m having 2 main problems with my site currently.

1. The homepage has no problem, but every other page has a blank space (or margin) below the header and above the footer that I would like to remove.

2. I have a padding on almost all content on the left and right sides, but on the mobile version that padding is too much. How can I have 2 different padding settings for desktop and mobile version?

My website is: http://www.boquetecoffeetour.com
If you need more info let me know.
Thank you!

[Christopher]

Hi there,

I would like to check your site, but it’s under construction mode. Please provide us with login credentials.

Thanks.

[ampescod]

This reply has been marked as private.

[Nabeel A]

Hi again,

Thank you for providing the credentials!

1. To remove the spacing from pages, just add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-container.max.width.offset {
    margin: 0 !important;
}

2. To set the different padding for mobile devices, you can use this code:

@media screen and (max-width: 767px){
.x-container.max.width {
    padding: 10px 20px 5px !important;
}
}

Let us know how this goes!

[ampescod]

Thank you! The first code worked perfectly on the margin space below the header, but for the margin space above the footer it didn’t work. You can still see the empty space on the “Cafés de la Luna” page (http://boquetecoffeetour.com/?page_id=56) and on the “Contact Us” page (http://boquetecoffeetour.com/?page_id=62)

On the second note the margins for the mobile version also worked only on some pages. It still looks pretty bad on the Contact form and the “About the Finca” mobile version. Can that be fixed with css or do I need to adjust something on Cornerstone? Again, thank you so much for your help!

[ampescod]

Nevermind, I made some adjustments on Cornerstone that worked out perfectly with your css. Thank you so much!

[Joao]

Glad to hear it,

Thanks for lettings us know.

Joao

[Author]

Posts