Jump to content

Header elements - horizontal alignment

Go to solution Solved by sorca_marian,

Recommended Posts

  • Solution

Can you add a link to your site?

Link to comment

hi Sorca, i figured it out. thank you so much.

But i have another issue, i don't know if you can help me with it.

On my home page, i have a slideshow full bleed gallery. It's is looking great on the desktop, but cutting the entire image on the mobile.

is there a way to make it look differently on the mobile (mainly change the entire gallery type)

below the link to the website:

https://wedge-ferret-ejnz.squarespace.com/work

 

pass:1234

Link to comment

Hi @podstudio,

Add the below code in the Page header code injection

You can play with the value 60% to increase or decrease the height of images on mobile

@media(max-width: 767px) {
    
    .grid-item .grid-image {
        padding-bottom : 60%!important;
    }

}

 

Screenshot 2024-03-13 at 20.38.13.png

Link to comment

You can add the below code in the Page header code injection

@media(max-width: 767px) {
    
    .gallery-fullscreen-slideshow {
        height : 30vh!important;
    }

}

 

Screenshot 2024-03-13 at 20.43.42.png

Link to comment

Yes but after I will need to provide a code for that category

Link to comment
@media(max-width: 767px) {

    #siteWrapper {
        min-height : auto!important;
    }
    
    .gallery-fullscreen-slideshow {
        height : 30vh!important;
    }

}

 

Screenshot 2024-03-13 at 20.52.45.png

Link to comment

If they are the same time, yes

Link to comment

Thank you Sorca for the help, but I still have one more question. 

Same as my main page, I am not satisfied with how the projects are showing on the mobile.

is there a way to replace the project gallery type, which is slideshow: simple on the desktop version, with slideshow full-full bleed  on the mobile only?image.png.51f228688b4c320cc7e16a92f1c8709b.pngimage.thumb.png.3db69f912330b035b25e3bdb67249692.png

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.