Mobile View Sections

[johnzoro]

I am having a few problems now with mobile view

How do I make it so that the “design” section is full width

Also the positives and negatives sections look a bit funny on mobile view

[Leo]

Hi John,

Currently all the sections have a 10px padding on the left and right side because this CSS is added:

@media (max-width: 1199px) {
    .container {
        width: auto;
        padding: 0 10px;
    }
}

Changing it to padding: 0; should work.

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnzoro]

that fixed the first problem but the pros and cons ones still look muddled on mobile view

[Leo]

You meant the list in the Pro section is pushed to the right a bit?
That’s because this CSS you’ve added:

.pro ul {
    padding-left: 50px;
}

You try can changing it to desktop only:

@media (min-width:769px) {
    .pro ul {
        padding-left: 50px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnzoro]

yeah there is that but there are gaps between the sections

i would imagine it would be green section then straight to red?

[Leo]

Try

@media (max-width: 768px) {
    .inside-grid-column {
        margin-bottom: 0;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnzoro]

I don’t think that works

[Leo]

I don’t see the code being added?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnzoro]

I added it but it didn’t work so I removed it again

[Tom]

If you could leave it in there it will help us understand why it’s not working.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[johnzoro]

sorry

i added it back in the css

[johnzoro]

do you know what? i think its working now!

thank you so much

[Leo]

You’re welcome!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnzoro]

I’ve changed the css again, can you let me know what to add again

[Leo]

Sorry not sure what you mean? What is the question?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts