Resize image blocks

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

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

 

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

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?

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?

On 3/19/2022 at 2:10 AM, tuanphan said:

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

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.

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?

On 3/23/2022 at 3:34 AM, tuanphan said:

Desktop or mobile?

Desktop please.

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%;
}
}

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?

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