Jump to content

Resizing images and many galleries for mobile

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.dubbe-moulder.com/

Hello everyone,

  1. On the architecture firm’s website https://www.dubbe-moulder.com there are many galleries for projects and I’d like to resize them all for mobile as they are currently cropped.
  2. Also, there is a still image of the architects on the home page, cropped as well, how do I resize it?
  3. Finally, on the contact page, there is divider as an image that's supposed to separate the form block from the contact info. On the mobile site it is oversized, dropping the contact info to the very bottom. Is there a way to resize it to very small, or drop it after the contact info?

See the 2 images below. Thank you in advance.

gallery-example.jpg

image-architects.jpg

Edited by jolenem
modif
Link to comment
  • Replies 2
  • Views 177
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

#1. #2. Add to Design > Custom CSS

/* resize gallery mobile */
@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 35vh !important;
}
[data-section-id="5f4014bbdc61a56e39da1305"] {
    min-height: unset !important;
}
}

#3. If you want to remove it on mobile only, add this CSS

/* contact page - remove line */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1597937014007_7766 {
    display: none;
}
}

 

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

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.