Horizontally Center Image in Responsive Design

Site URL: https://tulip-violin-g9e5.squarespace.com/core-values

Hello,

I'm trying to align an image horizontally. It looks great until the webpage resizes to fit various screen sizes. I'd like to center it in relation to the text on the left, but haven't been able to figure out the right code. See attached screenshots for reference. I've tried everything and can't get it -- help would be SO appreciated!

Can you setup password & share site url?

@tuanphan oops, sorry. Done! Password is HFH, https://tulip-violin-g9e5.squarespace.com/core-values

21 hours ago, kaitlinrayelle said:

@tuanphan oops, sorry. Done! Password is HFH, https://tulip-violin-g9e5.squarespace.com/core-values

Add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
div#page-5e544a9d734d5849d0c1899b>.row {
    display: flex;
    justify-content: center;
    align-items: center;
}
}

On 3/4/2020 at 8:35 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
div#page-5e544a9d734d5849d0c1899b>.row {
    display: flex;
    justify-content: center;
    align-items: center;
}
}

 

@tuanphan it didn't work 😕

Finally figured it out! you need to use the row id! here's a sample:

#yui_3_17_2_1_1584842933157_421 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

1 hour ago, kaitlinrayelle said:

Finally figured it out! you need to use the row id! here's a sample:

#yui_3_17_2_1_1584842933157_421 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

 

Your code won't work, try F5 ;) 

I see the code worked here?

@media screen and (min-width:641px) {
div#page-5e544a9d734d5849d0c1899b>.row {
    display: flex;
    justify-content: center;
    align-items: center;
}
}

17 hours ago, tuanphan said:

I see the code worked here?

@media screen and (min-width:641px) {
div#page-5e544a9d734d5849d0c1899b>.row {
    display: flex;
    justify-content: center;
    align-items: center;
}
}

 

Just when I thought we had it...

no, that's not working? it looks good on a desktop but when resized to the ipad it's not centered