Hi, just wondering how I would make the main logo the full width of the screen when viewing on a mobile, it looks like it has some padding currently.
Thanks in advance
Hey mike_espie,
Can you give us a link to your site? so we can take a closer look.
And try to give you some css code that should work.
Best regards,
Nikko
Ah sure thing!
Hi mike_espie,
Try adding this css code in Quick CSS (located in Enfold > General Styling):
@media only screen and (max-width:767px) {
.responsive #top #wrap_all .container {
width: 100%;
max-width: 100%;
}
.responsive .logo img {
width: 100%;
}
}
Let us know if that helps.
Best regards,
Nikko
Hi, I added it but it doesn’t seem to have changed anything
Hi,
I have checked your site and the code does work, I have posted a link on how it looks on my end in private content.
Can you post a screenshot on how it looks on your end?
Best regards,
Nikko
Ah you are right, my phone must be caching it, although that logo looks a bit squashed. The blue circle should be perfectly round but is appearing a little oval. how can i fix that?
Hi mike_espie,
I see, can you try to replace this code I gave:
.responsive .logo img {
width: 100%;
}
with:
.responsive .logo img {
width: 100%;
height: auto !important;
max-height: none !important;
}
Hope this helps :)
Best regards,
Nikko