• I can’t get the site to resize on mobile. Here’s my CSS. Can anyone point out what IO’m doing wrong?

    website is Verbatim Marketing Agency

    @media only screen and (min-width: 480px) {
    /* Set the slider height */
    .hollywood , .hollywood .et_pb_container {
    height: 200px !important;
    }
    .hollywood , .hollywood .et_pb_slide {
    max-height: 200px;
    }
    .hollywood .et_pb_slide_description {
    position: relative;
    top: 15%;
    padding-top: 0 !important;
    padding-bottom:0 !important;
    height:auto !important;
    }
    .hollywood et_pb_slide_content {
    font-size; 18 !important; }
    }
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • For your footer widgets, you have this rule:

    #footer-widgets .widget_recent_entries li {
        padding-left: 0px!important;
        width: 459px!important;
    }

    That rule is keeping the page at 459px, which is wider than a mobile phone. You can kind of see it if make your desktop browser narrow and scroll all the way down to the bottom. The line that reads “Website Redesign: Avoid Organic Traffic Loss” sticks out to the right. You may want to add another rule into your media query so that the width is set to something like 100% at mobile screen widths.

    Thread Starter SharpDressedMan

    (@sharpdressedman)

    I removed it @crouchingbruin but it did not make any difference.

    It’s because you have the same rule in two different places in your child theme’s stylesheet. Unfortunately, it looks like you’ve used some sort of minifyer because most of the rules are glommed together on the first line, but delete both rules and it should work OK. Or, like I suggested earlier, add a media query that makes the width 100% at mobile widths so it still looks good at desktop widths.

    Thread Starter SharpDressedMan

    (@sharpdressedman)

    I did not find the duplicate you spoke of @crouchingbruin

    I added: .et_pb_slider .et_pb_slide {
    background-size: 100% 100% !important;
    }

    That fixed the slider dimensions

    BUT I can’t resize the description — the paragraph text.

    .et_pb_slide_description {
    font-size: 18px !important;
    }
    }

    Looks like you got it fixed with this media query? Because I see the font size in the slider getting smaller at mobile widths.

    @media (max-width: 767px) {
    .et_pb_slide_content {
        font-size: 14px!important;
        font-weight: 400;
    }
    }

    By the way, you should learn how to write your rules without using the !important clause so much. It’s not needed most of the time if you understand how specificity works, and most experienced web designers will tell you to only use it in very specific situations because it makes it harder to make later changes. I only use it if I need to override an inline style, or if the theme is so poorly designed that there aren’t enough classes or IDs to make a selector with higher specificity.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Site ISN't Resizing on Mobile’ is closed to new replies.