Jump to content

Website is a mess on tablets - How do I solve this without writing a million lines of code?

Recommended Posts

Site URL: http://www.whoisraag.com/

My website looks alright on desktop and mobile but it's a mess on tablets. @tuanphan I remember you pointing this out a while ago. How can I solve this without writing a million lines of code? Please let me know if you can help in any way 😞

It's okay for the tablet to follow the same rules as the mobile layout for my website. 

The same thing is happening for my company website - http://www.madebydot.tv/

2022-07-05 16_59_09-Raag R - Motion Design, Illustration and Explainer videos.png

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

On 7/14/2022 at 2:25 PM, blahblahraag said:

@tuanphan - On tablet, taking 'Water Cooler Trivia' as an example, We should see the heading first, then the thumbnail, and then the button 'View project' button (we can hide the project description for tablet). 

Let me know if you need anything else from my end!

You mean make them stacked, same as mobile, with heading first, then thumbnail, then button?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 7/15/2022 at 11:26 PM, blahblahraag said:

@tuanphan Yes exactly like on mobile would do too! In that case we can keep the project descriptions too! Thanks for clarifying!

Add to Design > Custom CSS

@media screen and (max-width:991px) and (min-width:768px) {
div#block-yui_3_17_2_1_1632148817253_110404+.row .span-6 {
    width: 100%;
}
div#page-60004ae2106f1934da4f5918>.row:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
}
div#page-60004ae2106f1934da4f5918>.row:nth-child(n+2) .span-6 {
    width: 100%;
}
}

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@tuanphan - It's surely better! But I'm having the same issue I did when I made this website the first time - If you see the projects below the 'Clients' section - 'Tekkieworden' has the following order - 

- Project title
- Description
- 'View project' button
- Thumbnail

But the project after it - 'clearTax', has the inverse order 
- Thumbnail first
- Project title
- Description
- 'View project' button

I'd like to stick to the 'clearTax' order for all projects. Let me know if you need me to clarify?

Link to comment
On 7/18/2022 at 8:04 PM, blahblahraag said:

@tuanphan - It's surely better! But I'm having the same issue I did when I made this website the first time - If you see the projects below the 'Clients' section - 'Tekkieworden' has the following order - 

- Project title
- Description
- 'View project' button
- Thumbnail

But the project after it - 'clearTax', has the inverse order 
- Thumbnail first
- Project title
- Description
- 'View project' button

I'd like to stick to the 'clearTax' order for all projects. Let me know if you need me to clarify?

Use new code

@media screen and (max-width:991px) and (min-width:768px) {
div#block-yui_3_17_2_1_1632148817253_110404+.row .span-6 {
    width: 100%;
}
div#page-60004ae2106f1934da4f5918>.row:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
}
div#page-60004ae2106f1934da4f5918>.row:nth-child(n+2) .span-6 {
    width: 100%;
}
/* Clients */
div#block-yui_3_17_2_1_1610649358773_249986+.row, div#block-2ef92e5615e553fd1185+.row, div#block-0707ccffc23450bb7924+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.