Is it possible to make my logo on mobile smaller and change custom liquid text size

[projectthirteen]

• I need some help reducing the size of my logo (although I’m not using an image just the store name text) for my mobile site as it covers two lines instead of one (for laptop its fine).

• I’m also wondering if it’s possible to reduce the size of a custom liquid file as I currently have a world clock that’s too big for my mobile site but perfect for my laptop view. Is it possible to make it smaller so it fits on line on my mobile site?

• see below my current mobile and laptop site and a reference for how I want it to look.

• I’m currently using the spotlight theme

• https://project-thirteen.com.au

• pass - projecthirteenpassword

[PageFly-Garcia]

Hi @projectthirteen , this is Garcia from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved:

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

@media screen and (max-width: 767px){ h1.header__heading .h2 { font-size: 12px; } #time-current { font-size: 9px; } }

Hope it helps!

Cheers,
Garcia

[projectthirteen]

Thanks @PageFly-Garcia , although the logo only keeps the new smaller size on the home page instead of throughout the whole store. Is there a way to make the logo keep its smaller size throughout the entire store on mobile?

[PageFly-Garcia]

@projectthirteen please replace the code you added above to this:
@media screen and (max-width: 767px){
h1.header__heading .h2,.header__heading-link .h2 {
font-size: 12px;
}
#time-current {
font-size: 9px;
}
}
Hope it helps!

[projectthirteen]

Hey @PageFly-Garcia sorry this still doesn’t work…

[Vinsinfo]

@projectthirteen Please follow below steps to display logo text in single line in mobile view. Let me know whether it is helpful for you.

1. From admin go to “Online Store” → “Themes”.
2. Click “Customize” button from the current theme.
3. Click “Header” section.

4. Paste the below code in the “Custom CSS” field and save changes.

@media only screen and (max-width: 400px) {
    .header {
        grid-template-columns: 15% 70% 15%;
    }
}

Result will be like,

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

[projectthirteen]

Thanks @Vinsinfo , although for anyone trying to do this as well you have to remove @PageFly-Garcia code for the logo and add it into you theme.liquid file as well as in the custom liquid on your header.