Mobile View Sections

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.

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

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;
    }
}

yeah there is that but there are gaps between the sections

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

Try

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

I don't think that works

I don't see the code being added?

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

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

sorry

i added it back in the css

do you know what? i think its working now!

thank you so much

You're welcome!

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

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