Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
alll

Avenue: Logo resizing on mobile view

Question

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

Anyone have css for that? Thanks!

Edited by edokken

Share this post


Link to post

19 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
  • 0

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!

Edited by bmaass

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Edited by bmaass

Share this post


Link to post
  • 0

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!!!

Share this post


Link to post
  • 0

@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.

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

@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!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Edited by mh146

Share this post


Link to post
  • 0

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

Edited by rheacw
Initial Revision

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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!

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...