Jump to content

Resize image blocks

Recommended Posts

  • Replies 9
  • Views 561
  • Created
  • Last Reply

Top Posters In This Topic

3 hours ago, non-profitwebsiteguy said:

Site URL: https://stbonifacefoundation.com

Hello,

I am trying to resize image blocks on my webpage. Specifically I want to adjust the footer logo so it aligns with the logo in the header, and I need to resize the image blocks of the pictures in the Team page. 

PW: kam1712kam!!

Footer.PNG

 

I try the following one to make logo in footer have the same size with logo in header

#block-yui_3_17_2_1_1647397784989_5020  .image-block-wrapper {
  max-width: 775.062px !important;
}

But it fixes at the moment, therefore if you change the size of browser, they are on different size.

I think we need to add the logo in a separate block with on one row. Afterward, we can set max-width with the % value so it will fit when we change browser size

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
19 hours ago, bangank36 said:

I try the following one to make logo in footer have the same size with logo in header

#block-yui_3_17_2_1_1647397784989_5020  .image-block-wrapper {
  max-width: 775.062px !important;
}

But it fixes at the moment, therefore if you change the size of browser, they are on different size.

I think we need to add the logo in a separate block with on one row. Afterward, we can set max-width with the % value so it will fit when we change browser size

This worked really well for the footer logo! I just adjusted to 500px.

Is there anything I can do to resize the pictures on my management page?

Link to comment
On 3/17/2022 at 8:57 AM, non-profitwebsiteguy said:

This worked really well for the footer logo! I just adjusted to 500px.

Is there anything I can do to resize the pictures on my management page?

You mean people image on managemenet page? Desktop or mobile?

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 3/22/2022 at 7:14 AM, non-profitwebsiteguy said:

Yes, please. I was able to narrow the columns and that helped, but they are still a bit too big. Also, I'd like to center them, but they get too small when i select inline.

Desktop or mobile?

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 3/25/2022 at 7:31 AM, non-profitwebsiteguy said:

Desktop please.

Try adding to Design > Custom CSS

/* Management resize image */
@media screen and (min-width:992px) {
div#block-yui_3_17_2_1_1647224015460_20150 {
    width: 30%;
}
}

 

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 3/26/2022 at 2:57 AM, tuanphan said:

Try adding to Design > Custom CSS

/* Management resize image */
@media screen and (min-width:992px) {
div#block-yui_3_17_2_1_1647224015460_20150 {
    width: 30%;
}
}

 

This worked perfectly. Is there a way to center the photos as well?

Also, is there a way to apply CSS to the footer to shrink the logo there a well please?

Link to comment
On 3/28/2022 at 3:11 AM, non-profitwebsiteguy said:

This worked perfectly. Is there a way to center the photos as well?

Also, is there a way to apply CSS to the footer to shrink the logo there a well please?

Use this new code

/* Management resize image */
@media screen and (min-width:992px) {
div#block-yui_3_17_2_1_1647224015460_20150 {
    width: 30%;
	margin: 0 auto;
}
/* footer logo */
div#block-yui_3_17_2_1_1648411113956_13325 {
    width: 50%;
    margin: 0 auto;
}
}

 

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.