[Support request] css styling for mobile

Home Forums Support [Support request] css styling for mobile

Home Forums Support css styling for mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #632516
    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

    GeneratePress 2.1.3
    #632528
    David
    Staff
    Customer Support

    Hi Nicola,

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

    #632536
    Nicola

    Sorry, yes, you can access it now.

    #632564
    David
    Staff
    Customer Support

    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;
        }
    }
    #632592
    Nicola

    That worked, thank you very much!

    #632595
    David
    Staff
    Customer Support

    Glad to be of help 🙂

    #632597
    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

    #632652
    David
    Staff
    Customer Support

    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*/
        }
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.