Jump to content

banner image zoom, mobile view

Recommended Posts

  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Try adding to Design > Custom CSS

@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 100px !important;
}
section#home-a {
    min-height: unset !important;
    height: 200px !important;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
13 hours ago, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 100px !important;
}
section#home-a {
    min-height: unset !important;
    height: 200px !important;
}
}

 

thanks for offering this idea @tuanphan 

when i use this code it zooms out all the way in mobile view and looks like this:

image.thumb.jpeg.ffc1f90cd6176cd8a9b85dd310ce3334.jpeg

 

here's how squarespace is automatically zooming in: 

IMG_3076.thumb.jpg.67434f5bb4f4314b5e7dc233ca66c6b3.jpg

this is what i would like it to look like:

IMG_3076b.thumb.jpg.f1f2439e5c2d0f4f848075afa06ad9fe.jpg

can this be achieved?

thank you!

Link to comment

hi @tuanphan

i'm still wondering whether we can zoom into the image like the picture i sent above, that is my preference.

but in the meantime i was able to adjust your code to get a workable option until we can figure that out. when i do so there is a black bar along the top of the image. can we move the image up so the black bar is not there?

/* zoom mobile banner */
@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 100px !important;
}
section#home-a {
    min-height: unset !important;
    height: 260px !important;
}
}IMG_3094.thumb.jpg.f8d99cc457ad158a8723a6c99600a7df.jpg

Link to comment
On 8/9/2022 at 2:16 AM, fc1 said:

hi @tuanphan

i'm still wondering whether we can zoom into the image like the picture i sent above, that is my preference.

but in the meantime i was able to adjust your code to get a workable option until we can figure that out. when i do so there is a black bar along the top of the image. can we move the image up so the black bar is not there?

/* zoom mobile banner */
@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 100px !important;
}
section#home-a {
    min-height: unset !important;
    height: 260px !important;
}
}IMG_3094.thumb.jpg.f8d99cc457ad158a8723a6c99600a7df.jpg

Try adjust this number

top: 100px !important;

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.