Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #505554

    Hi guys, love the theme. I appear to be having some issues with the responsiveness. Everything seems fine, until we get to the mobile size and then margins and things are getting a bit messed up. I have attached a few screenshots to show the issue I am having. What would be the easiest way to fix this?

    Desktop: Screen Shot 2015-09-18 at 8.21.30 AM

    Mobile: Screen Shot 2015-09-18 at 8.21.53 AM

    Desktop: Screen Shot 2015-09-18 at 8.20.36 AM

    Mobile: Screen Shot 2015-09-18 at 8.20.49 AM

    • This topic was modified 9 years, 1 month ago by asassano1985.
    #505667

    Hi asassano1985!

    Send us a link and we’ll take a look. If your using Android make sure you use the official Chrome browser.

    Best regards,
    Elliott

    #505704

    Yes I am using Chrome on Android.

    #506282

    Hi!

    It is because of this css modification:

    #top #wrap_all .header_color h3, #top #wrap_all .main_color h3, #top #wrap_all .alternate_color h3, #top #wrap_all .footer_color h3, #top #wrap_all .socket_color h3 {
        color: #4ea3bd;
        font-size: 35px;
        font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: lighter;
        text-transform: uppercase;
    }

    Try to add the line-height property:

    #top #wrap_all .header_color h3, #top #wrap_all .main_color h3, #top #wrap_all .alternate_color h3, #top #wrap_all .footer_color h3, #top #wrap_all .socket_color h3 {
        color: #4ea3bd;
        font-size: 35px;
        font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: lighter;
        text-transform: uppercase;
        line-height: 3em;
    }

    Regards,
    Ismael

    #506489

    Those seem to change my line height on the desktop version as well. Is there a way to make it so the line-height only changes on the mobile version? Also it doesn’t fix the issue with the 2 boxes in the 2nd set of images.

    #506780

    Hey!

    Alright. Please replace the code with this:

    @media only screen and (max-width: 767px) {
    #top #wrap_all .header_color h3, #top #wrap_all .main_color h3, #top #wrap_all .alternate_color h3, #top #wrap_all .footer_color h3, #top #wrap_all .socket_color h3 {
        line-height: 3em;
    }
    }

    Did you add a negative margin to those columns? Try to add this inside the css media query above:

    .flex_column.av_one_half {
        margin-bottom: 20px !important;
    }

    Regards,
    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.