Archived topic

css styling for mobile

7 replies · Started by Nicola on July 25, 2018

Viewing posts 1–8 of 8

July 25, 2018 at 8:05 am #632516

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

July 25, 2018 at 8:14 am #632528

Hi Nicola,

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

July 25, 2018 at 8:17 am #632536

Sorry, yes, you can access it now.

July 25, 2018 at 8:44 am #632564

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

July 25, 2018 at 9:19 am #632592

That worked, thank you very much!

July 25, 2018 at 9:35 am #632595

Glad to be of help :)

July 25, 2018 at 9:46 am #632597

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

July 25, 2018 at 11:24 am #632652

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*/
    }
}

This archived topic is closed to new replies.

Start building better websites today.