Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 20, 2020 at 6:23 am #1224230
    lsrmedia

    The logo when the screen size is below 989 pixels is too small. If I add the code:

    @media only screen and (max-width: 989px) {
    .responsive .logo img {
    max-width: 100%;
    max-height: 100%;
    }
    }

    It will increase the size of the logo when the screen size is below 768, but for a screen size of 768 to 989 it is still small. How can I fix this so that the logo will be larger for all screen sizes.

    June 21, 2020 at 4:51 am #1224343
    Rikard

    Hey lsrmedia,

    You have a lot of padding added to the logo:

    .logo img {
    padding: 30px 30px 30px 5px;
}

    I’m not sure where that is coming from though since you have file compression active. If you want to apply that padding to screen sizes above tablets only then you can use this instead:

    @media only screen and (min-width: 1025px) {
.logo img {
    padding: 30px 30px 30px 5px;
}
}

    Best regards,
    Rikard

    June 23, 2020 at 6:19 am #1224774
    lsrmedia

    Thanks for the quick reply. I added the following code:

    @media only screen and (max-width: 889px) {
    .logo img {
    padding: 10px 0px 0px 0px;
    }
    }

    @media only screen and (min-width: 990px) {
    .logo img {
    padding: 30px 30px 5px 5px;
    }
    }

    @media only screen and (max-width: 989px) {
    .responsive .logo img {
    max-width: 70%;
    max-height: 70%;
    }
    }

    The logo looks good at all sizes now except between 768 px and 989 px. Between that screen width the logo goes very small. Why is the logo going so small and how can it be fixed?

    June 24, 2020 at 3:33 am #1224992
    Rikard

    Hi,

    This CSS seems to be causing that to happen:

    @media only screen and (max-width: 989px) {
.responsive .logo img {
max-width: 70%;
max-height: 70%;
}
}

    If you increase the % to 100 then it will look more like on the other screen sizes.

    Best regards,
    Rikard

    June 24, 2020 at 7:24 am #1225056
    lsrmedia

    I increased the percentage to 100% but the logo, while somewhat bigger, still goes small when the screen width is between 768px and 989px.

    When the screen width is below 768px the logo is large, then between 768px and 989px the logo goes small. On screen widths above 989px, the logo is large again.

    There must be some way of making the logo larger on screen widths between 768px and 989px?

    June 25, 2020 at 5:06 am #1225400
    Rikard

    Hi,

    Please try this CSS as well:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
    height: 130px;
}
}

    Best regards,
    Rikard

    June 25, 2020 at 6:30 am #1225413
    lsrmedia

    Thanks, that worked well. Thanks again for your help.

    June 26, 2020 at 5:52 am #1225722
    Rikard

    Hi,

    Great, I’m glad that you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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