Jump to content

How to align the text beside the image on mobile

Go to solution Solved by tuanphan,

Recommended Posts

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.

Screen Shot 2021-10-16 at 10.09.22 AM.png

Screen Shot 2021-10-16 at 10.09.59 AM.png

Edited by Ciodensky
clarify the text
Link to comment

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

 

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

Link to comment
  • Solution
On 10/18/2021 at 11:25 PM, Ciodensky said:

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

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

 

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

Link to comment
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.

Edited by Ciodensky
rephrase for clarity
Link to comment
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?

image.thumb.png.632ffcb3f2fb851bbe51f2ef8993c871.png

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

 

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.