atmos

Friday at 06:13 PM

Hi, I have almost finished optimising my website for mobile devices by creating a copy of each page section for mobile and formatting it to look good on mobile. I have then used the following code extensively to make sure that the mobile version only appears on mobile and the desktop version only appears on desktops.

@media only screen and (min-width:641px) {[mobile-data-section-id]{display:none}}
@media only screen and (max-width:640px) {[desktop-data-section-id]{display:none}}

However, I am struggling to make my website look good on tablet. On my ipad it seems to force the desktop view in landscape orientation and the mobile version in portrait orientation. I feel that the site could look much better honestly on tablet at present. One issue includes the nav menu dropdown links overlapping on landscape orientation. Is there a way to optimise for tablet effectively?

Is it possible to force the mobile version on tablet so that there is a hamburger menu in both portrait and landscape orientations?

All I can think to do is again create a copy of each page section, format them so that they look good when viewing the website on my tablet then adding code so that only the tablet versions show up on my ipad. Is this feasible? I feel there must be a better way to get around this issue.

Thanks

Atmos

June 22

Just now, Lesum said:

@atmos Awesome! I just checked; it's working correctly.

Thank you so much for your help. I never would have figured that out on my own. Really appreciate it! I noticed that you have a Buy Me A Coffee site. I’ll definitely contribute something. I may take you up on your paid Squarespace service too at some point if you can help with the optimisation side of things.

June 22

@Lesum it looks great on my end. Would you mind checking it on your side like you did with the product page?

June 22

@Lesum That's great. Thank you so much! Would you mind providing the altered code which I can apply the same settings to the cart page too? When I tried to change

body[class*="type-products"]

to

#cart

earlier, it didn’t apply the darkened box to the cart page.

June 22

@Lesum The new code moves the navigation bar to a different position in the header. I just noticed

It’s been moved up slightly

June 22

@Lesum That's ok no need to apologise. I’m very grateful for your help! I have added the new code

June 22

@LesumI have updated it to the latest code you shared. Please let me know if that works on your side

June 22

It looks like that did the trick. Thank you! Is the box set to the same size of the header even if the header gets made smaller (it probably wont but thought I’d ask.

June 22

body[class*="type-products"].view-item header#header .sqs-announcement-bar {
    height: 49px !important;
    min-height: unset !important;
}

body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone {
    min-height: unset !important;
}

body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper {
    height: calc(100% - 49px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper {
    height: 100% !important;
}

body[class*="type-products"].view-item header#header .header-dropshadow {
    height: 100%;
    background: #000 !important;
    opacity: 0.75 !important;
}

body[class*="type-products"].view-item header#header .header-inner {
    align-items: flex-start !important;
    height: 100% !important;
}

/* Mobile styles */
@media screen and (max-width: 767px) {
    body[class*="type-products"].view-item header#header .sqs-announcement-bar {
        height: 100px !important;
    }

    body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper {
        height: calc(100% - 100px) !important;
    }
}

This is the code I added

June 22

1 minute ago, Lesum said:

@atmos Also, did you remove the header announcement bar? When I was writing the code, the header had the announcement bar.

No, I just copied and pasted what you shared with me.

June 22

4 minutes ago, Lesum said:
@atmos Yes, now it's showing up. You did modify something in the code, which is why the filter is only showing halfway.

This part was modified:
body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper {
    height: calc(51%) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

I didn’t modify that as far as I am aware. I just copied and pasted the code you shared. I have removed it and copy and pasted it again to see if that changes how it shows on your screen

June 22

2 minutes ago, Lesum said:

The code I just shared isn't appearing on the browser on my end. The code you're referring to was intended to add the background image. Did you add this code?

body[class*="type-products"].view-item header#header .sqs-announcement-bar {
    height: 49px !important;
    min-height: unset !important;
}

body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone {
    min-height: unset !important;
}

body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper {
    height: calc(100% - 49px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper {
    height: 100% !important;
}

body[class*="type-products"].view-item header#header .header-dropshadow {
    height: 100%;
    background: #000 !important;
    opacity: 0.75 !important;
}

body[class*="type-products"].view-item header#header .header-inner {
    align-items: flex-start !important;
    height: 100% !important;
}

/* Mobile styles */
@media screen and (max-width: 767px) {
    body[class*="type-products"].view-item header#header .sqs-announcement-bar {
        height: 100px !important;
    }

    body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper {
        height: calc(100% - 100px) !important;
    }
}

The code you're referring to from was to add the background image.

I did. It’s probably because I didn’t press save. Please check again as it should be there now

June 22

@Lesum Apologies, I misunderstood. I have already added the code and that is where I am at right now. This is in reference to my product page.

The code you shared adds a dark box but it only half covers the header image I added

June 22

1 minute ago, Lesum said:

Can you add the code so I can check?

Sure. This is the code for the header image on the product page.

body[class*="type-products"].view-item header#header {
    background-image: url(https://images.squarespace-cdn.com/content/65e71d12deef391e74f7afcd/1716200250958-WEXYTWMCD2HP3ZJOYYKE/Untitled+%23126+%281%3A3%29.jpg?content-type=image%2Fjpeg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 51.4vh;
}

body[class*="type-products"].view-item header#header {
.header-nav-item * {
    color: white;
}  
:not(.header--menu-open) .header-actions .icon--fill svg {
    fill: white !important;
}
span.sqs-cart-quantity {
    color: white;
}
a.btn {
    background: white;
    color: black;
}
.burger-inner>div {
    background-color: white !important;
}  
}

@media only screen (max-width: 1024px) {
    body[class*="type-products"].view-item header#header .header--menu-open .header-menu {
        padding-top: 170px !important;
    }
}

June 22

Just now, Lesum said:

Yes, you're correct.

Thank you. That code seems to work but it only covers part of the header image. Do you know how to make the box extend to cover the full image?

This is the code I have for the image and height if that helps

body[class*="type-products"].view-item header#header {
    background-image: url(https://images.squarespace-cdn.com/content/65e71d12deef391e74f7afcd/1716200250958-WEXYTWMCD2HP3ZJOYYKE/Untitled+%23126+%281%3A3%29.jpg?content-type=image%2Fjpeg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 51.4vh;
}

June 22

@Lesum Hi, so just to check, will that code affect all of the product pages which currently use the same header image? If I want to do the same for the cart page, could I replace

body[class*="type-products"]

with

#cart

to get the same effect?

Thank you

June 22

@tuanphan

Hi, yeah sure. Here’s some links to a product page and the cart page.

https://www.atmos.productions/store/p/poetry-for-the-blind-paperback

https://www.atmos.productions/cart

June 21

2 hours ago, tuanphan said:

You mean when clicking image >> Show lightbox.

If pages has 10 images, then in lightbox, it will show 10 images (in slideshow format, so users can click to see other images within lightbox)?

Yes that is correct. They are not in a gallery though and are separately placed images as it gives me more control on the presentation/layout.

June 20

Hi,

I have added some headers to the cart and product page but I want to add a code similar to the one below so that the navigation text is easier to read. Screenshot attached to help with this.

filter:brightness(40%)

When I try to add this line of code, it ends up affecting both the image and anything else in the header (announcement bar and navigation text etc).

I want to add the correct code into here somehow:

body[class*="type-products"].view-item header#header {
    background-image: url(https://images.squarespace-cdn.com/content/65e71d12deef391e74f7afcd/1716200250958-WEXYTWMCD2HP3ZJOYYKE/Untitled+%23126+%281%3A3%29.jpg?content-type=image%2Fjpeg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 51.4vh;
}

Any help would be most welcome

Thank you

EDIT: While on this topic, does anyone know how I can add a heading to these headers using CSS so that they look the same as the ones on my other pages. I’d like to add “Product” to the product page header and “Cart” to the cart page header. I have attached another screenshot to show you how I want it to look like based on another page.

June 20

On 6/12/2024 at 9:13 PM, Lesum said:

@atmos Hi! Add this under Custom CSS to add a background image to fill the header across all product pages. Code will also transform all the navigation items to white:

body[class*="type-products"].view-item header#header {
    background-image: url("replace-with-your-image-url");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 50vh;
}

body[class*="type-products"].view-item header#header {
.header-nav-item * {
    color: white;
}  
:not(.header--menu-open) .header-actions .icon--fill svg {
    fill: white !important;
}
span.sqs-cart-quantity {
    color: white;
}
a.btn {
    background: white;
    color: black;
}
.burger-inner>div {
    background-color: white !important;
}  
}

@media only screen (max-width: 1024px) {
    body[class*="type-products"].view-item header#header .header--menu-open .header-menu {
        padding-top: 170px !important;
    }
}

Hi @Lesum, I was wondering if you know how to solve the header issue? Thanks, Atmos

June 19

On 6/3/2024 at 8:41 AM, tuanphan said:

So you want

Initial: show image

Hover: show image, show a dark overlay, show a text

Click: open a lightbox with bigger image version

?

Hi, that is correct. Eventually I’d like to join up these lightboxes of single images on a page too but I know i will need a third party app at that time

June 15

On 6/12/2024 at 9:13 PM, Lesum said:

@atmos Hi! Add this under Custom CSS to add a background image to fill the header across all product pages. Code will also transform all the navigation items to white:

body[class*="type-products"].view-item header#header {
    background-image: url("replace-with-your-image-url");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 50vh;
}

body[class*="type-products"].view-item header#header {
.header-nav-item * {
    color: white;
}  
:not(.header--menu-open) .header-actions .icon--fill svg {
    fill: white !important;
}
span.sqs-cart-quantity {
    color: white;
}
a.btn {
    background: white;
    color: black;
}
.burger-inner>div {
    background-color: white !important;
}  
}

@media only screen (max-width: 1024px) {
    body[class*="type-products"].view-item header#header .header--menu-open .header-menu {
        padding-top: 170px !important;
    }
}

Hi that worked great. Do you know how I can darken the background image similarly to the header images on my other pages? It needs to be darker so that the white text is more visible. If it helps, the overlay opacity for my headers is set to 75%. I have attached a screenshot to show you what I mean. Hope this helps.

I was also wondering if there is a way to add a large heading in the header, similar to the “Drawing” heading I use on another page? I’d like the alignment to be the same as this page if possible.

I really appreciate your help so far, thank you!

June 12

On 6/7/2024 at 6:41 PM, Lesum said:

@atmos I noticed that the logo on the product page isn't visible. So I assumed you wanted to adjust the code to enable adding a different logo on product pages.

If you'd like to apply the same background image to fill the header across all product pages, I can come up with a simple solution. However, unique images for each product page would require a lot of custom code and for each product page, you've to update image URLs and page IDs. Let me know whether you'd like a unique image for each product page or if the same image would work.

Hi Lesum, I was wondering if you’ve had a chance to think of the suitable code needed for this task? Hope to hear from you soon. Thanks, Atmos

June 7

2 hours ago, Lesum said:

@atmos I noticed that the logo on the product page isn't visible. So I assumed you wanted to adjust the code to enable adding a different logo on product pages.

If you'd like to apply the same background image to fill the header across all product pages, I can come up with a simple solution. However, unique images for each product page would require a lot of custom code and for each product page, you've to update image URLs and page IDs. Let me know whether you'd like a unique image for each product page or if the same image would work.

Hi, thats ok. It’s still a helpful bit of code to add to my vocabulary. I’m happy with the same image for each product page to keep things more simple. I’d like to add a similar image/header to my events pages as well.

June 7

19 hours ago, Lesum said:

@atmos To add a different header image on the product page, you can add this code:

body.collection-type-products.view-item .header-title-logo img {
    visibility: hidden;
}
body.collection-type-products.view-item .header-title-logo {
    background-image: url("replace-with-your-image-url");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

Hi, this one didn’t seem to fix my issue. The header than I created was actually another section which has a background to it. I’d like the background of a chosen image to fill the header and some space underneath it. I’ve attached another screenshot to hopefully show you what I mean. This code only appears to change my logo (which is still helpful to know for the time being.

I would like my product pages to have a white logo in the top left hand corner, white text for the navigation bar, and a header with the same layout I made by adding a section on regular pages.

Hope this helps

Forums

Gallery

Blogs

Events

Store

Downloads

Profiles

Posts posted by atmos

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources