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

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/

Hi.

What should it look like on tablet?

Center text/image or??

@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!

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?

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

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

@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?

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