How to vertically align text center

On 10/30/2021 at 1:46 AM, Anele0610 said:

Hey @tuanphan!

 

So this code works perfectly just for one line of the section, but can it work on all lines? 

I'm trying to imitate a table without coding one here.. 

 

https://fairwaystoleadership.squarespace.com/league-table 

The page looks fine. Can you explain?

@taunphan

I got this code to work on one page of this site I'm working on but for some reason i can't seem to get it to work again -- 

https://miriambulcherluxuryportraits.squarespace.com/family-photography 
No password, it's public 

First section after header image

Am I pulling the wrong code?

///center image///
div#page-section-61f979f021b7cf00d9375931>.row {
    display: flex;
    align-items: center;
}

On 2/2/2022 at 1:57 AM, ratkaj said:

@taunphan

I got this code to work on one page of this site I'm working on but for some reason i can't seem to get it to work again -- 

https://miriambulcherluxuryportraits.squarespace.com/family-photography 
No password, it's public 

First section after header image

Am I pulling the wrong code?

///center image///
div#page-section-61f979f021b7cf00d9375931>.row {
    display: flex;
    align-items: center;
}

Use this new code

/* align center text image */
@media screen and (min-width:768px) {
div#page-section-61f979f021b7cf00d9375931 .span-12>.row {
    display: flex;
    align-items: center;
}
}

I'm having the same problem as mentioned by a few people here, with the image disappearing when on mobile view, after adding CSS to vertically align the image and text. I'd like the image to appear above the text when viewed on mobile.

https://bamboo-rabbit-99gt.squarespace.com/config/
Password: !(cX3Ly@$323cC(

The section concerned is on my home page, underneath the header.

Thanks!

On 2/23/2022 at 10:28 PM, Leanne_M said:

I'm having the same problem as mentioned by a few people here, with the image disappearing when on mobile view, after adding CSS to vertically align the image and text. I'd like the image to appear above the text when viewed on mobile.

https://bamboo-rabbit-99gt.squarespace.com/config/
Password: !(cX3Ly@$323cC(

The section concerned is on my home page, underneath the header.

Thanks!

Edit your code to this

@media screen and (min-width:768px) {
div#page-section-62125653da85e03d494041f8>.row {
    display: flex;
    align-items: center
}
}

I'm having the same vertical alignment troubles.  Could you tell me from where you are getting the div#page-section number and how are you determining the min width?  This way I can spare you from calculating my 30some section blocks that need text/image vertical aligning : )

On 3/27/2022 at 9:39 AM, SRO said:

I'm having the same vertical alignment troubles.  Could you tell me from where you are getting the div#page-section number and how are you determining the min width?  This way I can spare you from calculating my 30some section blocks that need text/image vertical aligning : )

Can you share link to page where you have problem? each case will need a different code

On 9/2/2020 at 2:43 AM, tuanphan said:

Use this CSS for Work page

div#page-section-5f4d83e0a82f1a123a9bebe2>.row {
    display: flex;
    align-items: center;
}

 

UPDATE!!! Missed @tuanphan post back in February... this new code worked for me - now my images show in mobile and the text is center aligned on desktop 🙌 Tuan Phan for the win again!!! 🙌🙏

On 2/26/2022 at 9:21 PM, tuanphan said:

@media screen and (min-width:768px) {
div#page-section-62125653da85e03d494041f8>.row {
    display: flex;
    align-items: center
}
}

@tuanphan Hello! Thanks so much for this solution - it's working for me for desktop on 7.1, but on mobile the image disappears. Any chance you have a solution? I've tried a few media queries, but I guess I'm missing something.

I'm building this site, so it's currently password protected. The pages currently affected:

The banner at the top of the home page: https://marineselenee.squarespace.com/ 

The banner at the top of this page: https://marineselenee.squarespace.com/schedule

The PW is: marinefamily

Thanks so much! Ella ☀️

On 6/27/2022 at 12:01 PM, StoriesAroundTheSun said:

UPDATE!!! Missed @tuanphan post back in February... this new code worked for me - now my images show in mobile and the text is center aligned on desktop 🙌 Tuan Phan for the win again!!! 🙌🙏

 

@tuanphan Hello! Thanks so much for this solution - it's working for me for desktop on 7.1, but on mobile the image disappears. Any chance you have a solution? I've tried a few media queries, but I guess I'm missing something.

I'm building this site, so it's currently password protected. The pages currently affected:

The banner at the top of the home page: https://marineselenee.squarespace.com/ 

The banner at the top of this page: https://marineselenee.squarespace.com/schedule

The PW is: marinefamily

Thanks so much! Ella ☀️

You can wrap code in query to make code run on desktop only

@media screen and (min-width:768px) {
div#page-section-5f4d83e0a82f1a123a9bebe2>.row {
    display: flex;
    align-items: center;
}
}

4 hours ago, tuanphan said:

You can wrap code in query to make code run on desktop only

@media screen and (min-width:768px) {
div#page-section-5f4d83e0a82f1a123a9bebe2>.row {
    display: flex;
    align-items: center;
}
}

 

Thanks so much @tuanphan! 

Can you see the reason the code isn't working for these two pages:

https://marineselenee.squarespace.com/mini-guide
PW: marinefamily

https://marineselenee.squarespace.com/mini-guide-download
PW: marinefamily

🙏☀️

1 hour ago, StoriesAroundTheSun said:

Can you see the reason the code isn't working

This should get you closer.

@media screen and ( min-width : 768px ) {

  #page-section-62bd39614240fa059391415c .sqs-col-12 .sqs-row {
  
    align-items : center;
    display : flex;
    
    }
    
  }

I just did one. Replicate for others changing as needed.

Let us know how it goes.

1 hour ago, creedon said:

@media screen and ( min-width : 768px ) {

  #page-section-62bd39614240fa059391415c .sqs-col-12 .sqs-row {
  
    align-items : center;
    display : flex;
    
    }
    
  }

@creedon!!! Thank you!!! 🙏🙏🙏 Didn't consider needing to switch up the .sqs-col-12 .sqs-row for this layout - so appreciate you taking the time to figure this out for me ☀️

I am having the same issue, tuanphan: when I vertically centre the text in a section, my images disappear on mobile.

Any ideas?

https://www.artofair.ie/heat-pumps-in-ireland

Password: 12345

17 hours ago, SteveBarrett said:

I am having the same issue, tuanphan: when I vertically centre the text in a section, my images disappear on mobile.

Any ideas?

https://www.artofair.ie/heat-pumps-in-ireland

Password: 12345

Hi,

The image is fine to me

Yes, all sorted now.

I used the code you suggested above.

I didn't realise it was different initially.

Thank you again.

Hi, Tuan.

I am having another slight issue with this code.

It happens when I use:

@media screen and (min-width:768px)
{
  div#page-section-63246fe928c9b3341a4f815f .row
  {
    display: flex;
    align-items: center;
  }
}

and also use the following code to get images and text to stack on top of each other earlier:

@media screen and (max-width:1239px)
{
div#page-section-63246fe928c9b3341a4f815f .col
  {
    width: 100%;
  }
}

The issue is that the images and text no longer stack vertically at certain breakpoints.

Do you know why this is?

Here is the link for reference:

https://www.artofair.ie/heat-pumps-in-ireland

Thanks in advance,

Steve.

I actually solved this issue, but now I have another 😂.

See screenshot.

Is there a way to increase spacing between the image and text—without effecting spacing between other elements, like the green, red and blue boxes.

See screenshot.

On 10/7/2022 at 4:11 PM, SteveBarrett said:

I actually solved this issue, but now I have another 😂.

 

See screenshot.

 

Is there a way to increase spacing between the image and text—without effecting spacing between other elements, like the green, red and blue boxes.

 

See screenshot.

I see it already space here. Did you solve it?

Yes, thank you, Tuan!