Issue with Mobile spacing vs desktop view

  • Resolved thementalupdate

    (@thementalupdate)


    6 years, 9 months ago

    Hello,

    I am having trouble working out the dimensions of spacing on my mobile view of the site. The widget menu under my posts in the mobile view is very thin and only hangs on the right side of the screen. I think because I added additional css to help the margins, the mobile responsiveness of my theme is getting overridden. Any code that helps exlude mobile from the additonal css? Or anything else may be causing the problem?

    Here is the code I added to get the margins how I like them:
    .wrap {
    max-width: 85%;
    }

    @media screen and (min-width: 48em) {
    .wrap {
    max-width: 85%;
    }
    }

    .page.page-one-column:not(.twentyseventeen-front-page) #primary {
    max-width: 85%;
    }

    @media screen and (min-width: 30em) {
    .page-one-column .panel-content .wrap
    {
    max-width: 85%;
    }
    }

    .has-sidebar #secondary {
    width: 26% !important;
    }

    .site-info { display: none; }

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yes because of this:

    
.has-sidebar #secondary {
    width: 26% !important;
}

    That’s saying no matter what the screen size, make the sidebar 1/4 of the total screen size. So on mobile you get a very thin sidebar.

    If you still need this style but only want it to apply on Tablet and larger devices, try adding a ‘media query’ around it like so:

    
@media screen and (min-width: 768px) {
    .has-sidebar #secondary {
        width: 26%;
    }
}

    Also a tip, try to avoid using the ‘!important’ CSS rule unless there is absolutely no other way of styling the element.

    • This reply was modified 6 years, 9 months ago by Andrew Nevins.
    Thread Starter thementalupdate

    (@thementalupdate)

    Thank you for your help, and great explanation! That worked great, and makes a lot sense.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Issue with Mobile spacing vs desktop view’ is closed to new replies.