Jump to content

Images all the same height on mobile and Newsletter block amends

Recommended Posts

Where are the images located? I dont see on home

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.