Jump to content

How do I fix my banner from resizing badly in mobile view vs. desktop view?

Recommended Posts

Site URL: https://www.oneunion.org.nz

Hello, I am trying to customise my banner so it fits mobile view as well as desktop view. On desktop the banner image works well, but in mobile view the majority of it gets cut off/zooms in and looks terrible. Is there code that can help with this? The home page has a unique banner, and all other pages on the website have the same banner - I'm having problems with both.  website link is : https://www.oneunion.org.nz, and other page banner is: https://www.oneunion.org.nz/contact . Thanks!

Link to comment

Add to Design > Custom CSS

/* resize home mobile top banner */
@media screen and (max-width:767px) {
[data-section-id="6118ffa2fcba4961cfbfaa53"] {
    min-height: unset !important;
    height: 20vh;
}
}

See how to find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi tuanpahn, thank you for this! The code still slightly cuts off the edge of the banner in mobile view - is there any way to tweak it so it's just a fraction smaller? Also, when I try to change the banner size for mobile on all the other site pages, do I just replace the data section id using the link you provided, or do I also have to change the first line - where it says "home" change it to whatever the page name is? Thank you 

/* resize home mobile top banner */
Link to comment
On 11/30/2021 at 6:48 AM, oneunion_nz said:

Hi tuanpahn, thank you for this! The code still slightly cuts off the edge of the banner in mobile view - is there any way to tweak it so it's just a fraction smaller? Also, when I try to change the banner size for mobile on all the other site pages, do I just replace the data section id using the link you provided, or do I also have to change the first line - where it says "home" change it to whatever the page name is? Thank you 

/* resize home mobile top banner */

It looks fine here. Can you say clearly?

image.thumb.png.9bc99069bc14f297c99291b043b92f45.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
On 11/29/2021 at 3:24 PM, tuanphan said:

Add to Design > Custom CSS

/* resize home mobile top banner */
@media screen and (max-width:767px) {
[data-section-id="6118ffa2fcba4961cfbfaa53"] {
    min-height: unset !important;
    height: 20vh;
}
}

See how to find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Hi,
I'm having similar problem on mobile - the images are cropped and zoomed in too much.
My site has 2 main index pages with pictures in them. I have tried this and many other scripts. Tried copying section ID as well as collection ID, but nothing changed. I don't Know if there is some conflict with other scripts. Webpage https://www.avanor-acoustics.com/

Page is divided in 2 languages by adding en/... and lv/... to the url of pages.
To hide both languages in navigation I used a code in code injection. I have no idea if this goes in conflict with your code for zooming out images.

I added padding to the sides, to make the images crop less on mobile devices, but still they are too zoomed in. I would like to zoom them out a little bit more that there is no detail loss as you can see in pictures provided. 
 

Screenshot 2022-04-21 at 10.47.42.png

image0-1.png

Link to comment
On 4/21/2022 at 3:52 PM, Alvis said:

Hi,
I'm having similar problem on mobile - the images are cropped and zoomed in too much.
My site has 2 main index pages with pictures in them. I have tried this and many other scripts. Tried copying section ID as well as collection ID, but nothing changed. I don't Know if there is some conflict with other scripts. Webpage https://www.avanor-acoustics.com/

Page is divided in 2 languages by adding en/... and lv/... to the url of pages.
To hide both languages in navigation I used a code in code injection. I have no idea if this goes in conflict with your code for zooming out images.

I added padding to the sides, to make the images crop less on mobile devices, but still they are too zoomed in. I would like to zoom them out a little bit more that there is no detail loss as you can see in pictures provided. 
 

Screenshot 2022-04-21 at 10.47.42.png

image0-1.png

With English Page, try adding this to Design > Custom CSS

@media screen and (max-width:767px) {
.Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.Parallax-item:first-child figure {
    transform: unset !important;
}
section#en\/model-t {
    min-height: unset !important;
    height: 200px;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 4/24/2022 at 8:25 AM, tuanphan said:

With English Page, try adding this to Design > Custom CSS

@media screen and (max-width:767px) {
.Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.Parallax-item:first-child figure {
    transform: unset !important;
}
section#en\/model-t {
    min-height: unset !important;
    height: 200px;
}}

 

This code disables parallax effect. I need it. And also I tried to use this code to set the same options on other pages in this index by changing it slightly - renaming first-child to nth-child(2) and (3) and so on...

/* eng/model-s */
@media screen and (max-width:640px) {
.Parallax-item:nth-child(2) img {
    width: 270% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.Parallax-item:nth-child(2) figure {
    transform: unset !important;
}
section#en\/model-s {
    min-height: unset !important;   
  height: 550px;
}}

Now I'm able to zoom in as much as I like(I found out that in my case the perfect zoom is 270%) - but I don't have no control over the focal point. Any ideas how can I shift the images to the right or left side and keep the parallax effect? 

Link to comment
On 4/25/2022 at 6:51 PM, Alvis said:

This code disables parallax effect. I need it. And also I tried to use this code to set the same options on other pages in this index by changing it slightly - renaming first-child to nth-child(2) and (3) and so on...

/* eng/model-s */
@media screen and (max-width:640px) {
.Parallax-item:nth-child(2) img {
    width: 270% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.Parallax-item:nth-child(2) figure {
    transform: unset !important;
}
section#en\/model-s {
    min-height: unset !important;   
  height: 550px;
}}

Now I'm able to zoom in as much as I like(I found out that in my case the perfect zoom is 270%) - but I don't have no control over the focal point. Any ideas how can I shift the images to the right or left side and keep the parallax effect? 

Try adjust left value in this code

.Parallax-item:nth-child(2) img {
    width: 270% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 4/27/2022 at 10:19 AM, tuanphan said:

Try adjust left value in this code

.Parallax-item:nth-child(2) img {
    width: 270% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

 

That did the trick 🙂 

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.