Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 18, 2015 at 2:45 pm #505554
    asassano1985

    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.
    September 18, 2015 at 4:42 pm #505667
    Elliott

    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

    September 18, 2015 at 5:30 pm #505704
    asassano1985

    Yes I am using Chrome on Android.

    September 21, 2015 at 9:14 am #506282
    Ismael

    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

    September 21, 2015 at 3:49 pm #506489
    asassano1985

    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.

    September 22, 2015 at 4:56 am #506780
    Ismael

    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

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