Jump to content

Images all the same height on mobile and Newsletter block amends

Recommended Posts

  • Replies 11
  • Views 514
  • Created
  • Last Reply

Where are the images located? I dont see on home

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
25 minutes ago, CatherineG said:

sorry on the work page (which is set to my home page) I have 6 images - Daisy bakes, LDM etc. When you click on those pages - thank you

Since these section are individuals I need to get their id, so you can use Find Squarespace Ids plugin for that, Here is the final custom css

@media screen and (max-width: 768px) {
    section[data-section-id="5fa540fbb4432e3d381e5585"] .sqs-block-image-figure > div,
    section[data-section-id="5fa53c6145328a7d12787d97"] .sqs-block-image-figure > div, 
    section[data-section-id="5fa53ecd8f6823481cfcb906"] .sqs-block-image-figure > div 
    section[data-section-id="5fa5453b8f6823481cfd7d3b"] .sqs-block-image-figure > div,
    section[data-section-id="5fa55f6860622a1964c637c8"] .sqs-block-image-figure > div,
    section[data-section-id="5fa5638af3540671e58f0962"]  .sqs-block-image-figure > div {
      padding-bottom: 50% !important;
  }
    section[data-section-id="5fa540fbb4432e3d381e5585"] .sqs-block-image-figure > div .thumb-image,
    section[data-section-id="5fa53c6145328a7d12787d97"] .sqs-block-image-figure > div .thumb-image,
    section[data-section-id="5fa53ecd8f6823481cfcb906"] .sqs-block-image-figure > div .thumb-image,
    section[data-section-id="5fa5453b8f6823481cfd7d3b"] .sqs-block-image-figure > div .thumb-image,
    section[data-section-id="5fa55f6860622a1964c637c8"] .sqs-block-image-figure > div .thumb-image,
    section[data-section-id="5fa5638af3540671e58f0962"] .sqs-block-image-figure > div .thumb-image {
      height: auto !important;
      top: 50% !important;
      transform: translateY(-50%);
  }
}

image.thumb.png.9ffd28f47c82f9c3a10dbf5e5b510494.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
9 minutes ago, CatherineG said:

Thank you so much! Is there anyway that they can be the same size (height wise) as the 2nd, 3rd, 4th images? Ideally, I'd like to make the top image a bit deeper so it's the same height as the other images. Sorry I should have made that clear from the start.

I tried that but the top image have not enough height, so I have to change the dimension to 50%, if you can update the top image to have the same dimension with other you can update the code, like so

image.png.c85fcc8b16752a7d04d55525a3bcf601.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Thank you @bangank36 I don't suppose you know the answer to my other question about the newsletter block? 

I'd also like to amend the newsletter block on the footer, the boxes are too big (I'd like them thinner height-wise) and I'd like the button to be the same size as the 'get in touch' button above. Can anyone help with this?

Link to comment
6 hours ago, CatherineG said:

@bangank36  just to let you know I've put the site to live so the link is now https://www.catherinegiaquinto.co.uk/

@media only screen and (min-width: 600px) {
  .newsletter-form-body {
    display: flex;
    align-items: center;
  }
}

.newsletter-block .newsletter-form-button {
  padding: .5em 1.169em !important;  
  min-width: 120px !important;  
}
.newsletter-block .newsletter-form-button .newsletter-form-button-label {
   font-size: .9rem; 
    font-weight: 400;
}

image.thumb.png.5979c8b421ef941c5a721a16a0250350.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
6 minutes ago, CatherineG said:

@bangank36

Thank you! That has altered the button size but not the boxes, do you have some code to make the boxes much shorter (like in the picture attached)

footer.jpg

.newsletter-block .newsletter-form-field-element, .newsletter-block .newsletter-form-button {
	padding: .7em 1.169em !important;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.