Avenue: Logo resizing on mobile view

How do I make my logo smaller on just the mobile version in the avenue template?

Anyone have css for that? Thanks!

Hey there,

Can you provide the name of the template or a link to your site?

Each template has its own structure and naming conventions within the code. So you would need to provide your website URL or at least provide the name of the template in order for someone to help.

Thanks!

I posted above in the original post that it's the avenue template. :) Look at the first sentence at the very end..

and it's in the tags.

My bad! Read your post too fast. I'll have a look.

Did you upload a logo or did you type in the name of your site and choose a font?

No problem! I do that a lot! I uploaded a file for a logo. My website is alycialovellweddings.com

If you typed in the title then chose a font:

Go to settings > advanced > code injection — then in the head add this css:

 <style type="text/css">

   @media screen and (max-width: 400px){

   .site-title .logo{
   font-size: 20px; 
   }

   }

</style>

If you uploaded a logo image:

Go to settings > advanced > code injection — then in the head add this css:

<style type="text/css">

@media screen and (max-width: 400px){

.logo-image .logo img {
max-width: 50%;
}

}

</style>

You can set the font size or max-width to whatever you want I choose arbitrary values.

Beautiful! You're awesome! Thanks so much!

Can the same code be used for images in a gallery that are uploaded in the main content of the page? Of course I know the code would change.. can you provide an example of that? I'm trying to resize the photos on this page so that they will be smaller in mobile view: www.creativeslivehappy.com/home1 Thank you!!!

@amagrude

Is it the social media icons you are looking to change on mobile? If so, the above wont be enough to get the job done. The logo is so specific that it has it's own identifier (.logo img) so it's easy to target with our new code—but in the case of images in a gallery, they have ID's that are generated every time the page loads so it's harder to target only the gallery you want to change.

As a compromise, you could try to use the social block instead of a gallery then try to style those icons with CSS.

@amagrude

I can see you have social icons at the top of the page too— perhaps one set is enough? While social is great for marketing your business and bringing people to your site, those links will take people away from site and into a more distracting environment where they may not engage with your content. So I would recommend you use social icons on your site judiciously. Just my opinion, not a rule.

Best,Bill

Thank you! Yes it is the social media icons. I wanted to upload my custom icons opposed to squarespace's generic ones. No other ways around it?

@amagrude

You can use a code block to make a custom menu. See this fiddle:

https://jsfiddle.net/x79vos2q/3/

Replace the gallery of icons with a code block, paste the HTML in the code block, then add the CSS to your style sheet via:

Design > Custom CSS

I used the image URLs from the icon gallery so don't delete images from the original gallery or the images might disappear. Let me know if that works out for you. Good luck!

Hi there, I'm trying to do the same thing. The code above works great when the phone is in 'portrait' mode, but doesn't seem to apply when the phone is flipped on its side in 'landscape' mode. Any thoughts on this?

feenstra.squarespace.com

Thanks!Andrew

Hi, I followed the instructions above for an uploaded logo image, but still see a small mobile logo image. What I am doing wrong? See attached. Site is annarborsmarthomes.io.

Thank you,Michael

I can't seem to get this to work. I keep entering the code, but nothing happens. I am actually trying to make my logo bigger. I have tried changing the "max-width" to "min-width" but it just ends up distorting my logo.

Any advice? My website is http://www.rheawalsh.com

two days ago grey McLaren. P1 I bought afterearning 18,513 Dollars..it was my previous month's payout..just a littleover.17k Dollars Last month..3-5 hours job a day...with weekly layouts..it's realy thesimplest. job I have ever Do.. I Joined This 7 months. ago. and now making overhourly.------------------- http://goo.gl/sNgdBv

Squarespace recently updated their style setting in the Avenue Template. There is now a specific style setting within the Style Editor for resizing the logo specifically on mobile.

You can locate this by heading to Design > Style Editor > Sizes & Values > Mobile Logo Size.

Their guide on that style tweak is here:

https://support.squarespace.com/hc/en-us/articles/214823157-Avenue-Style-Editor-tweaks#toc-sizes---values

rheacw - I just looked at your site on mobile and your logo and Menu look great. Would you mind telling me how you fixed it? I cannot get the Menu link to go above or below my logo, it just lays on top of it. Thanks in advance!