Mobile & Tablet View Issues

Site URL: https://www.taylorlovecreative.com/about

I tried looking at various past responses on the forum to issues related but not really finding the solutions I need...  and have tried some different codes but have been unsuccessful... I am working with a Brine family template 7.0 (I think it is called Jaunt)...

On my website "about" page (https://www.taylorlovecreative.com/about) I have two big issues:

1. FIX H2 TEXT WRAPPING ON TABLET VIEW: On my "about" page h2 text is wrapping and looks bad. mostly on tablet view but wondered if there is a way for it not to wrap... but want to make sure it will always be bigger than h3 and normal sized text. (see attached photo). I am fine if the image in the middle or the black block of text gets smaller if that is helpful to alleviate the issue of h2 text wrapping in tablet view.

2. REORDER TEXT BLOCKS ON MOBILE VIEW: My "about" page is laying out the text in an order I do not like once in mobile view, it is fine on tablet and desktop view. On mobile view I want to re-order the text blocks... there are 8 text blocks (not including the lines)... all need to be reordered...
The order I want it in is: 1. image 2. black box of text 3. credentials 4. experience 5. certificates 6. clients 7. tools

Hope this makes sense/this is possible. 

@tuanphan @creedon maybe you all know what to do about this. feel free to tag any other helpful squarespace members that might have advice on these two issues I am facing. 🙂

Hi,

#1. Add to Design > Custom CSS

/* Tablet about */
@media screen and (max-width:991px) and (min-width:768px) {
section#meet-taylor h2 {
    font-size: 16px;
    letter-spacing: 1px;
}}

#2. Use this CSS

/* Mobile About order */
@media screen and (max-width:640px) {
div#page-621412f5cb162a568a696096>.row {
    display: flex;
    flex-direction: column;
}
div#page-621412f5cb162a568a696096 .span-6 {
    order: 1;
}
div#page-621412f5cb162a568a696096 .span-3:last-child {
    order: 2;
}

div#page-621412f5cb162a568a696096 .span-3:first-child {
    order: 3;
}}

@tuanphan you are AMAZING!!! How did you learn all this? I am trying to learn more so I don't have to ask the forum so much... do you recommend any videos or courses or ways to understand even just the basics to begin with?

On 4/15/2022 at 10:06 AM, TaylorLove said:

@tuanphan you are AMAZING!!! How did you learn all this? I am trying to learn more so I don't have to ask the forum so much... do you recommend any videos or courses or ways to understand even just the basics to begin with?

You can learn free at W3schools.com (Learn HTML first, then CSS)

https://www.w3schools.com/html/default.asp