Jump to content

Mobile & Tablet View Issues

Recommended Posts

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. 

IMG_9570.thumb.jpg.8a628a449f5dcc2862c242a4c4d5d26f.jpg

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.