[Support request] css styling for mobile

[Nicola]

Hi, I have set my website pages up how I want them to look using GP sections, padding and column grids but now I realise that doesn’t work on the smallest mobile devices as the content appears squashed into the centre of the screen (at least that’s how it’s appearing in the customisation options tester). I tried adding both css examples below to the bottom of Editor stylesheet thinking this might help but it didn’t make any difference.

First example:

@media (max-width: 768px) {
.generate-sections-container {
max-width: 100%;
}
.inside-grid-column {
width: 100%;
}
.accordion {
width: 100%;
}

Second example:

@media (max-width: 768px) {
.generate-sections-container {
padding-left: 0px;
padding-right: 0px;
}
.inside-grid-column {
padding-left: 0px;
padding-right: 0px;
}
.accordion {
padding-left: 0px;
padding-right: 0px;
}

Can you please let me know what I’m doing wrong and suggest a solution?
Many thanks for any help you can provide,
Nicola

[David]

Hi Nicola,

is it possible for you take the site out from Coming Soon mode? So one of us can take a closer look

[Nicola]

Sorry, yes, you can access it now.

[David]

Thank you. OK, the customiser responsive view isn’t great especially when you have column content. But you’re on the right track, so currently i can see you have this CSS:

.generate-sections-container {
    padding-left: 60px;
    padding-right: 60px;
}

Just add this after that CSS to remove the padding to give it some space – it must be afterwards:

@media (max-width: 768px) {
    .generate-sections-container {
        padding-left: 0px;
        padding-right: 0px;
    }
}

[Nicola]

That worked, thank you very much!

[David]

Glad to be of help 🙂

[Nicola]

Hi David, That did indeed work on all pages with the exception of the page using accordion styling, see here:

/* Accordion Styles */
.accordion {
border-bottom: 1px solid #dbdbdb;
margin-bottom: 20px;
padding-left: 40px;
padding-right: 40px;
}
.accordion-title {
border-top: 1px solid #dbdbdb;
margin: 0;
color: #6699cc;
text-align: left;
padding: 20px 0;
cursor: pointer;
}
.accordion-title:hover {}
.accordion-title:first-child {border: none;}
.accordion-title.open {cursor: default;}
.accordion-content {padding-bottom: 20px;}
}

If I place the code you sent directly after the each style element it breaks the accordion styling. If I place it at the end it has no effect. Do you know why this might be from the css above? If you need to see the specific page again let me know and I’ll remove the Coming Soon mode, otherwise I need to keep it on.

Thanks,
Nicola

[David]

You only need to add the code once it should apply to all pages. I expect that its the padding on the accordion element in this CSS thats the problem:

/* Accordion Styles */
.accordion {
    border-bottom: 1px solid #dbdbdb;
    margin-bottom: 20px;
    padding-left: 40px; /* Padding on element */
    padding-right: 40px; /* Padding on element */
}

You could edit the code i provided to look like this which will reduce the padding on the smaller devices:

@media (max-width: 768px) {
    .generate-sections-container {
        padding-left: 0px;
        padding-right: 0px;
    }
    .accordion {
        padding-left: 10px; /* Adjust accordingly */
        padding-right: 10px; /* Adjust accordingly*/
    }
}

[Author]

Posts