Jump to content

Tablet version exactly like mobile version ?

Recommended Posts

Site URL: https://www.casegoods.in/

Good morning, 

password to reach the site : CaseGoods_C3

I'm trying my best to make a landing page with a relatively complex layout (with the help of spacers that would work well on all devices (screen, tablet, phone) but I'm not very happy of a few texts columns that are nice and wide on the screen version but become to narrow on the tablet version. The phone version automatically resize everything for the screen width so no issues with that version mostly.

Therefore I would like to try making the tablet version exactly like the phone version with all blocks rearranged one after another to see if it's visually better. I tried messing a little bit the "mobile breakpoint" parameter in the Site Styles but it only affects the Header, not the content of the page. Attached images of the current 3 versions of the landing page. 

Is there a simple way to make this trial via the custom CSS ?  
I'm working with the Brine template.

01_Screen.png

02_Tablet.png

03_Phone.png

 

 

 

Edited by Paul_in
adding password to reach the website
Link to comment
  • Replies 13
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 6/5/2020 at 1:33 PM, Paul_in said:

Right sorry :

https://www.casegoods.in/

password : CaseGoods_C3

 

Add to Home > Design > Custom CSS

section#landing-02, section#landing-03, section#landing-04 {
	.sqs-col-1 {
    width: 8.3333% !important;
    float: left !important;
}
.sqs-col-3 {
    width: 25% !important;
    float: left !important;
}
.sqs-col-5 {
    width: 41.6667% !important;
    float: left !important;
}
.sqs-col-7 {
    width: 58.3333% !important;
    float: left !important;
}
.sqs-col-10 {
    width: 83.3333% !important;
    float: left !important;
}
}

 

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

Hi @tuanphan Thanks for following up, 

I tried your code but didn't work the way I was hoping, maybe I've not been clear enough in my first message so adding images.

Basically I just want the automatic rearranging that is happening for the phone at 640px width and make all the block go under each other to actually happen at 1080px width.

So that the final tablet version is not like the desktop version with multiple columns but for it too look like the phone version with 1 column with all the blocks rearranged under each other. And I would like this for the entire website. 

 

 

Current_Tablet_version.png

Final_Tablet_Version.png

Link to comment
  • 5 months later...
2 hours ago, HannahZoe said:

@Paul_in @tuanphan 

Did you find a solution to this?  I am also having a lot of trouble with tablet view, and would prefer it display like the smaller mobile devices

If you share page url, we can check easier

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
  • 3 months later...
  • 7 months later...
On 11/7/2021 at 6:55 PM, makeandmarket said:

Hi there, is there a solution to this? I have the same issue @tuanphan if you're able to help please?

wanting to adjust the image card on the about page so that the text drops underneath the image on tablet and mobile.

website mirella-morolli.squarespace.com/about  pw: mirella

thanks 🙂

Don't remove any code in your current code. Add this to Design > Custom CSS

/* Tablet about card image */
@media screen and (max-width:900px) {
div#page-600a83b3f9c095244d3e126e .design-layout-card {
    flex-direction: column;
}
}

 

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 11/8/2021 at 2:34 PM, Amanda888 said:

Hi ,

I'm having the same problem.  Is there any solution ?  

I'm having an issue with image card and image collage on the tablet.  The text doesn't stack underneath like it does for the mobile.  

www.amandawebster.com.au

Thanks, any help appreciated!  🙂

I don't see images on homepage. Which page are you referring to?

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
  • 10 months later...
On 9/11/2022 at 10:57 PM, chillwave said:

Any get a solid answer on this? @tuanphan If you could help me out that would be amazing! I want my tablet breakpoint to look exactly like my mobile breakpoint. 

 

Website: tessaelaina.com

Password: tessa

Hi,

This will require a lot of code. Try adding this to Design > Custom CSS (for top video section), If it works, we will check other sections

/* Home tablet */
@media screen and (max-width:991px) and (min-width:768px) {
.fe-631cfb5df57a4538d68aaf79 {
    display: block !important;
    padding-left: 3vw;
    padding-right: 3vw;
}}

 

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

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.