Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Question

Posted (edited)

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

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

Your site is private. Can you setup password & share url again?

also /config is url for site owner.


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
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;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...