Jump to content

Recommended Posts

Hi legends.

Im been playing adding a custon .svg shape after my header to mirror some branding graphics.

I was hoping for a code could added to reduce the size on the mobile version? I'm happy enough with the desktop version.

This is the code Ive used in my custom CSS and I've attached screeenshots from desktop and mobile devices.

Ideally it could be adjusted by screen width percentage so I can match the shape length with the logo width. 

 

(Shape code )

header#header:after {
    content: "";
    background-image: url(https://svgshare.com/i/15fH.svg);
    background-size: contain;
    display: block;
    width: 100%;
    height: 40%;
    background-color: transparent;
    background-position: center;
    position: absolute;
    background-repeat: no-repeat;

 

Thanks in advance.

image.png

Screenshot_20240503_213758_Chrome.jpg

Link to comment
Posted (edited)

Hi, You can add this code to Website > Website Tools > Custom CSS

@media (max-width: 600px) {
.header .header-title--use-mobile-logo .header-mobile-logo img {
    max-height: 40px;
}
.header-announcement-bar-wrapper {
    padding-bottom: 5px !important;
    padding-top: 10px !important;
}
header#header::after {
    height: 20%;
}
}

Let me know if it helps!

Edited by Shadmon
Link to comment

thanks for the reply Shadon,

I've copied and pasted the code and everything looks correct I couldn't shrink the img file small enough to the desired size so I reformatted the image which has worked pretty well.

But on the mobile site it seems to not be docked to the top and has a gap.

Hoping theres an easy fix for that?

image.png

Link to comment

certainly looks better @Shadmon, On my phone I've still got a hairline gap (ill check the img file to make sure its not there).

 

When I shrink my desktop window this is how it appears 

image.thumb.png.3f98d62ec2958470f657c759c23f04e7.png

 

Would there be different code to fix that?

 

Thanks for your help with this @Shadmon

Link to comment

Okay, Please update the other CSS code with this. It's the final one. It should work. Let me know how it goes.

@media (max-width: 600px) {
.header .header-title--use-mobile-logo .header-mobile-logo img {
    max-height: 40px;
}
.header-announcement-bar-wrapper {
    padding-bottom: 5px !important;
    padding-top: 10px !important;
}
header#header::after {
    height: 20%;
    margin-top: -5px;
}
}

Link to comment

Hi @Shadmon really appreciate you trying so many things to resolve this.

I havent had any luck yet, but would a separate image for <600px devices work that I could tailor the file to suit?

 How would I add a separate image for Mobile devices in the code?

Link to comment

Yes, you can do that. Change the background image url for <600px devices.

@media (max-width: 600px) {
   header#header::after {
       background-image: url("https://svgshare.com/i/15tm.svg");
   }

}

Link to comment

Yes, you can do that. Change the background image url for <600px devices.

@media (max-width: 600px) {
   header#header::after {
       background-image: url("https://svgshare.com/i/15tm.svg");
   }

}

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.