How to align the text beside the image on mobile

Site URL: https://www.xystema.com/

From the images (wide and mobile screen) attached here, I'd like the following fixes:

1. Align the name text centered vertically on both wide and mobile screen.
2. Move the name text on the right side of the image on mobile screen same as with the wide screen.

The site password is 0612.

I will appreciate any help here.

Add to Design > Custom CSS

/* Align text - image */
div#block-yui_3_17_2_1_1634254936727_33211 + .row .row {
    display: flex;
    align-items: center;
}
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1634254936727_33211 + .row .row .span-1 {
    width: 30% !important;
}
div#block-yui_3_17_2_1_1634254936727_33211 + .row .row .span-1 .image-block {
    width: 90%;
}
}

14 hours ago, tuanphan said:

/* Align text - image */
div#block-yui_3_17_2_1_1634254936727_33211 + .row .row {
    display: flex;
    align-items: center;
}
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1634254936727_33211 + .row .row .span-1 {
    width: 30% !important;
}
div#block-yui_3_17_2_1_1634254936727_33211 + .row .row .span-1 .image-block {
    width: 90%;
}
}

Hi Tuanphan,

I was out all day. I just got your response.
I tried your code but I think I made some changes on squarespace that I could not trace the block id you were using.

Can you show me where you are getting the block id?

Is it the same block id identifier I am using in chrome or you're getting it from the inspection?

I am always confuse with "div#block-yui..."

Once I figure this out, I think you code should work.

Again thank you and looking forward to your response.

Ciodensky

On 10/20/2021 at 8:58 PM, tuanphan said:

Use this new code

/* Align text - image */
[data-section-id="61664c437456c9037969db05"] {
.row:nth-child(2) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
@media screen and (max-width:767px) {
.row:nth-child(2) .span-1 {
    width: 30% !important;
    float: left !important;
}
.row:nth-child(2) .span-3 {
    width: 65% !important;
    float: left !important;
}
.row:nth-child(2) .span-1 .image-block {
    width: 90% !important;
}
}}

 

Thank you thank you so much. Got it! It works like charm!..

Now, I need to figure out how you did this..

On 10/20/2021 at 8:58 PM, tuanphan said:

Use this new code

/* Align text - image */
[data-section-id="61664c437456c9037969db05"] {
.row:nth-child(2) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
@media screen and (max-width:767px) {
.row:nth-child(2) .span-1 {
    width: 30% !important;
    float: left !important;
}
.row:nth-child(2) .span-3 {
    width: 65% !important;
    float: left !important;
}
.row:nth-child(2) .span-1 .image-block {
    width: 90% !important;
}
}}

 

Just one last thing and this is separate from my previous question but still related to this. I would like to align them in the center in mobile screen.

I hope you don't mind. Thank you.

On 10/22/2021 at 7:59 AM, Ciodensky said:

Just one last thing and this is separate from my previous question but still related to this. I would like to align them in the center in mobile screen.

I hope you don't mind. Thank you.

It looks fine to me. Can you explain?

5 hours ago, tuanphan said:

It looks fine to me. Can you explain?

I am looking at centering testimonies, photo and name horizontally on the screen. Looks better if centered instead of left alignment.

On 10/25/2021 at 3:21 PM, Ciodensky said:

I am looking at centering testimonies, photo and name horizontally on the screen. Looks better if centered instead of left alignment.

Edit above code to this (I added justify-content: center to the code)

/* Align text - image */
[data-section-id="61664c437456c9037969db05"] {
.row:nth-child(2) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
@media screen and (max-width:767px) {
.row:nth-child(2) {
	justify-content: center;
}
.row:nth-child(2) .span-1 {
    width: 30% !important;
    float: left !important;
}
.row:nth-child(2) .span-3 {
    width: 65% !important;
    float: left !important;
}
.row:nth-child(2) .span-1 .image-block {
    width: 90% !important;
}
}}