Centered Vertical

Site URL: https://purple-grouper-3frb.squarespace.com

Hi there,

I recently just added some CSS codes from looking through these forums to vertically align some text boxes to the centre of the image to their left or right.

The alignment is working as intended, but when viewing on mobile, all of the images are disappearing. Wondering if someone would be able to provide guidance?

Password to view is: Goodwood!

It looks like you solved by using @media screen and (min-width:768px)?

Some images/text is incorrect order with the code. Do you need to fix it?

Thanks, tuanphan!!

Actually, that would be great if you know how to fix the image/text order! Thank you!

Would you also know how to make the header images a bit shorter on mobile throughout? I've been trying some different codes and nothing is happening unfortunately!

3 hours ago, ZachGallant5 said:

Thanks, tuanphan!!

Actually, that would be great if you know how to fix the image/text order! Thank you!

Add to design > Custom CSS

/* mobile image text order */
@media screen and (max-width:767px) {
/* mini golf */
div#block-yui_3_17_2_1_1648317918059_18659+.row {
    display: flex;
    flex-direction: column-reverse;
}
/* golf lessons */
div#page-section-623f46893b7c21354bc9e670>.row:nth-child(4) {
    display: flex;
    flex-direction: column-reverse;
}
/* header image */
[data-section-id="62479e78021a6a7bcf62d1f4"] {
    min-height: unset !important;
}}

Tuanphan, you are a wizard, thank you so much! That worked perfectly! I'm going to copy that code and use it for the rest of the page headers!! 🙂

Thank you!!