Max width for logo on mobile

[Web_Services]

Hi my site is https://automatic-portfolio.com/.

The logo we have on our desktop is too wide for our mobile site. I was wondering if there was a way to make it so that the desktop logo stays unchanged and that we can have a max width for just the mobile version that isn’t so large (say 350 px)

Thanks

[lely]

Hi @Web_Services,

That is possible with media query and custom CSS. Here’s your guide on how to get the correct selector for the logo.

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

Here’s your guide on how to set media queries. For mobile, screen width is 480px

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

The property to set width:

https://www.w3schools.com/cssref/pr_dim_width.asp

Hope this helps.

[Web_Services]

Hi Lely,

Thanks for your notes. The tips on CSS selectors was especially helpful but I wasn’t able to manage to get the coding right to reduce the width for just the mobile breakpoints. Could you please give me the code so I can change the width of the logo to 300 px for just mobile screens and keep it as is on desktop?

Thanks!

[jade]

Hi @Web_Services,

You have to write a media query first to target the mobile devices and it should be something like:

@media (max-width: 480px) {

}

then you can target the container of the logo and write the CSS code to change the width of the logo.

Basing on the console, the class of the logo is x-brand so you can write something like:

.x-brand {
    display: block;
    width: 250px;
}

then lastly add the CSS code in the media query:

@media (max-width: 480px) {
    .x-brand {
        display: block;
        width: 250px;
    }
}

Hope this helps you get started.