Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • July 20, 2022 at 5:26 pm #1358909
    July 20, 2022 at 6:00 pm #1358923
    KateStuartDesign

    Ah not to worry – I think I solved it:

    @media only screen and (max-width: 480px) {
    #header {height: 100px !important; }
    .responsive #top .logo svg {
    width: 140px;
    right: auto;
    position: relative; top: 10px; bottom: 10px;}}

    July 20, 2022 at 8:05 pm #1358949
    Rikard

    Hi,

    Great, I’m glad that you found a solution, and thanks for sharing. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    July 21, 2022 at 9:57 am #1358982
    KateStuartDesign

    Actually this is not quite solved. Regardless of how deep I make the header if I push the logo down by say 15px from the top then the bottom of the logo stops showing. Is there a reason?

    July 21, 2022 at 12:01 pm #1359011
    Rikard

    Hi,

    This CSS is currently applying:

    @media only screen and (max-width: 767px) {
.responsive #top .logo svg {
    width: 155px;
}
}

    I tried reducing the width, and that worked as expected. If I’m misunderstanding the problem you are having, then please try to explain your intentions a bit further.

    Best regards,
    Rikard

    July 22, 2022 at 10:27 am #1359157
    KateStuartDesign

    HI Rikard. Ok I have created a test page for you to see – I hope this makes my case easier to understand:

    LInk in private content

    The one on the left is my code and what I can’t work out. The mobile header should be 100px high with a 10 px buffer around the logo and I would like the logo to be as big as possible so 80px high.

    The one on the right is your code and it pushes the logo down so that you cant see the text under the RSFD

    The one on the bottom is what I would like in principle. The logo entered vertically in the header.

    Thank you very much for your help on this.

    July 22, 2022 at 12:25 pm #1359172
    Rikard

    Hi,

    Thanks for that. So did you try to add the CSS I posted and adjust the width? For example:

    @media only screen and (max-width: 767px) {
.responsive #top .logo svg {
    width: 130px;
}
}

    That works great when I check it on my end.

    Best regards,
    Rikard

    July 22, 2022 at 1:48 pm #1359193
    KateStuartDesign

    Sadly that doesn’t work. If you look at the link I sent you on a mobile you will see that the text under the four big letter is being cut off and that the space above and below the logo are not equal….

    July 22, 2022 at 6:02 pm #1359211
    Rikard

    Hi,

    Please try to adjust the width value down a bit, 115 pixels for example.

    Best regards,
    Rikard

    July 24, 2022 at 11:21 am #1359306
    KateStuartDesign

    Thanks Ricard that does work to some degree but it makes the logo very small. I would like it much bigger in the space and aligned vertically centred with a little padding around the logo – say 10px just so it doest touch the edge. More like the 3rd option on the page in the private content. Is there a solution for this?

    July 24, 2022 at 5:13 pm #1359327
    Mike

    Hi,
    Thanks for the link to your test page, please give the following css a try in my tests on your site it seems to achieve what you are looking for.
    I was not sure what was your custom css and what is the default, but this overwrites all of it so you may be able to trim it down some.
    Currently the theme sets the image using height: auto; and a number for the width, my idea is to reverse that so you can set the height to 80px as you wish. Also, the logo container is only 80px high and the svg has a top: 15px;, bottom: 15px;
    Anyways please give this css a try and see the screenshot in the Private Content area of the expected results.

    @media only screen and (max-width: 767px){
.responsive #top #wrap_all .logo,
.responsive #top #wrap_all #header {
    height: 100px !important;
}
.responsive #top #wrap_all .logo a {
    display: flex;
}
.responsive #top .logo svg {
    width: auto !important;
    height: 80px !important;
    top: 10px !important;
    bottom: unset !important;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    July 24, 2022 at 5:39 pm #1359330
    KateStuartDesign

    whoooohooo that looks like its worked! Thank you!

    July 24, 2022 at 6:31 pm #1359332
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘SVG logo settings on Mobile’ is closed to new replies.