Jump to content

Resize specific section ID, independent of other (conflicting) code?? CSS

Recommended Posts

here is my code:

//Resizing mobile background image
  @media screen and (max-width:767px) {
#page>article>section:first-child {
     min-height: 40vh !important;
  section[data-section-id="642368d97cda926038bb8689"] {
    min-height: 10vh !important;
    }
}
}

 

So the image on the left is the page with an empty section, i want that section to be resized to reduce the white-space. I have two pages that this will need to be applied to, and maybe more in the future. so i imagine for each page i'll need to insert a working version of the second half of the code. 

on the right hand image (and most my project pages) that is being resized by the first half of the code. 

the problem is i can disable the first part of the code and the second half will (seem to) work for the pages in question... but i can't get them both to work together. i've tried deleting pieces of the code (#page>article>section) and messing to try and figure it out but i can't get both pieces to work. 

 

Thanks!

squarespace help.jpg

Link to comment
  • Replies 6
  • Views 432
  • Created
  • Last Reply

Top Posters In This Topic

On 5/8/2023 at 2:45 AM, tuanphan said:

Can you share link to this page? We can check easier

i also just realized that the splash screen is resizing the main image and it looks funky. can i exclude just that page from the code?? 

thanks!!!

Link to comment
  • 2 weeks later...
On 5/12/2023 at 4:46 AM, gantons said:

hi, thanks! sorry for the delay

the issue applies to this page, among a couple other.

https://www.koblecreative.com/work/migration

Add to Design > Custom CSS

@media screen and (max-width:767px) {
#page>article>[data-section-id="642368d97cda926038bb8689"]:first-child {
    min-height: unset !important;
}
}

image.png.b2c1ec3e18178c070e2b149de95f35f6.png

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
  • 2 weeks later...
On 5/25/2023 at 1:48 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
#page>article>[data-section-id="642368d97cda926038bb8689"]:first-child {
    min-height: unset !important;
}
}

image.png.b2c1ec3e18178c070e2b149de95f35f6.png

this worked well. thank you very much

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.