CSS for mobile breakpoint not working

Comments

4 comments

  • Avatar
    Michael Williams

    Hi @wbrant

    I was able to solve it. You have to update the CSS in the styles file, unfortunately. Here's the CSS I wrote to fix things. You can see how it looks on our site. The comments in the CSS are for myself.

    Hope this helps!

    /* 
    This is for the newsletter section. A few things:

    1. I can't figure out how to ensure the image
    resizes properly after a certain size and
    doesn't get cut off at the top.

    2. I can't figure out how to target the subhead
    text to adjust the size in mobile.
    */

    @media screen and (max-width: 700px) {
    .newsletter-container {
    height: 400px;
    .newsletter__heading {
    padding: 0px;
    font-size: 25px;
    margin: 0;
    }
    .newsletter__wrapper {
    max-height: 300;
    padding: 0px;
    margin: 10px;
    }
    .newsletter__subheading {
    padding: 10px;
    }
    }
    }

    2
    Comment actions Permalink
  • Avatar
    wbryant

    I'm having the exact same issue.  Did you find a solution?

    1
    Comment actions Permalink
  • Avatar
    Michael Williams

    No problem. I don't know your skill level, but my CSS skills are pretty basic and found this article helpful

    Best of luck!

    1
    Comment actions Permalink
  • Avatar
    wbryant

    Thanks for taking the time, Michael, to reply!  Too bad this can't be accomplished in the editor itself.  Good to know I'll have to edit the files directly for media queries.

    0
    Comment actions Permalink

Please sign in to leave a comment.