Website turns into "mobile website format" sooner on scaling

Hi,

web: https://ellipse-teal-dl5w.squarespace.com/
pass: 2

I was wondering if there is css code to make the website adapt/change into the mobile format sooner than what it is at the moment.

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

like this:

thanks

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.

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

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.

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

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.

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

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:

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

home: home elements change to 1 column sooner like the portfolio code

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

Hi,
not working
the css code says  "missing opening '{'
tried a few variants and couldn't get rid of the error
Cheers

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.

@Ziggy @tuanphan Ah yes you're correct sorry.
Thanks for the code.
I isolated just that code and it works thanks. ill find that '}' cheers.

*Only issue now is the bear image disappears and the button and name needs more vertical padding

current look with new code:


desired look :

Thanks

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

Magic. much appreciated thanks again for all your help