Jump to content

Website turns into "mobile website format" sooner on scaling

Go to solution Solved by Ziggy,

Recommended Posts

4 hours ago, MAC1 said:

At this point of width scaling (xxx px) i'd like the website to go into mobile format:

At this point that is not an option we have available, the break point is 767px.

That said, we can control some things, if you want the grid to go to one column sooner you can do that like this:

// Illustration page grid columns - one
@media only screen and (max-width:999px) {
  #collection-64d20affa6742348f6ae01bd {
    .portfolio-grid-basic {
      grid-template-columns: 1fr !important;
    }
  }
}

This is just for the Illustration page currently.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

that's looking better already for tablets thanks.

so you can't target the header or footer?
i got it working on motion and design also. thanks.

how do i change the code for home and contact to do the same?
here's the collection id for those 2.

// contact page grid columns - one
@media only screen and (max-width:999px) {
  #collection-64d2646babc255172a644578 {
    
  }
}
// home page grid columns - one
@media only screen and (max-width:999px) {
  #collection-64d255619ec2f716e2c78972 {
    
  }
}

 

Edited by MAC1
Link to comment
8 minutes ago, MAC1 said:

so you can't target the header or footer?

What do you want to do here?

9 minutes ago, MAC1 said:

and each portfolio page needs to be addressed individually? 

I just targeted one, but you can remove the collection ID and it will apply to all of the portfolio pages with a grid.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

This will target all grid portfolios:

// Illustration page grid columns - one
@media only screen and (max-width:999px) {
    .portfolio-grid-basic {
      grid-template-columns: 1fr !important;
    }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
2 minutes ago, Ziggy said:

so you can't target the header or footer?
----

What do you want to do here?

 



I wanted the header and footer to move into a smaller 1 column format also it gets a bit tight as it reduces in width. Not sure if thats possible though.

thanks for the advice thats much cleaner for the portfolio elements

Link to comment
3 minutes ago, MAC1 said:

I wanted the header and footer to move into a smaller 1 column format also it gets a bit tight as it reduces in width. Not sure if thats possible though.

I'm not aware of a good way to do this before the main switch to mobile.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Got it. i can change the layout of header and footer so it works out fine

the other question:

how do I change the code for "home" and "contact" to do the same as the portfolio code?
here's the collection id for those 2.

 

// contact page grid columns - one
@media only screen and (max-width:999px) {
  #collection-64d2646babc255172a644578 {
    
  }
}
// home page grid columns - one
@media only screen and (max-width:999px) {
  #collection-64d255619ec2f716e2c78972 {
    
  }
}

 

Link to comment
12 minutes ago, MAC1 said:

the other question:

how do I change the code for "home" and "contact" to do the same as the portfolio code?
here's the collection id for those 2.

See above:

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

the contact page has a contact form and text and the home page has gallery carousel and text. 
they dont have portfolio's but id like them to format the same as the portfolio code you gave me if that makes sense. 

contact page: id like to change the body the same way as the portfolio code you gave

column.thumb.jpg.61598f11e50937a9a0a5d10fd4555e24.jpg

 

home: home elements change to 1 column sooner like the portfolio code
homecol.thumb.jpg.e620c2b4ebeea28613836de936c9b422.jpg

 

Edited by MAC1
Link to comment

@MAC1 With Contact Page, try this CSS code

@media screen and (max-width:1024px) {
.fe-64d2646babc255172a64457a>div {
    grid-area: unset !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px;
}
.fe-64d2646babc255172a64457a {
    display: block !important;
    padding-left: 6vw;
    padding-right: 6vw;
}}

 

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
51 minutes ago, MAC1 said:

the css code says  "missing opening '{'

There's nothing wrong with the code @tuanphan provided, you must have an error elsewhere in your Custom CSS, check for a closing curly bracket that isn't necessary.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

You try this new code

@media screen and (max-width:1024px) {
.fe-64d2646babc255172a64457a>div {
    grid-area: unset !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px;
    position: relative;
}
.fe-64d2646babc255172a64457a {
    display: block !important;
    padding-left: 6vw;
    padding-right: 6vw;
}
div#block-yui_3_17_2_1_1692640641475_5941 {
    display: block !important;
    height: 200px;
    width: 200px !important;
    margin-left: auto;
    position: absolute;
    right: 0;
    top: calc(~"50% + 50px");
    transform: translateY(-50%);
}}

 

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.