Jump to content

Resize image blocks

Recommended Posts

  • Replies 9
  • 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

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
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

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
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

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
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

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
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

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.