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

Hi everyone! I have a website on squarespace since 2015, but I recently noticed that my website is not scaling down properly on tablet view. Please can someone help me please!! It looks fine in mobile view but does not scale down properly in tablet view

www.vrushaliaherdesigns.com

2 hours ago, Vicky_Storyteller said:

I recently noticed that my website is not scaling down properly on tablet view.

This is because you are using Fluid Engine which doesn't have a tablet view breakpoint.

There is not much we can do to help as this is a Squarespace backend issue. You will have to contact SS and request they make Fluid Engine work on tablets.

Many folks have complained about this issue on this forum. You may want to search for something like fluid engine tablet to see those posts.