Jump to content

Mobile width for bordered-pricing-columns shrinks to less than half only when I target a specific section

Recommended Posts

Posted

Site URL: https://www.ukulelekidz.com/camp

Here is my desktop code for 2 column border with shadow (works good) 

.sqs-col-6 {border: 2px solid #172236;width:47%!important;margin-left: 2.5%; box-shadow: 2px 5px 10px rgba(0,0,0,0.2)}

Here is my adjustment for mobile... (works good also)

@media only screen and (max-width:768px){ .sqs-col-6 {margin-left:0%!important;margin-bottom: 7%}} 

The issue is the borders are applied to all 2 column sections on my site, so i then go to target just the section I want and great, it works for desktop, but then messes up the mobile view. Here is the full code i used to target the section: 

section[data-section-id="6038f9680adafe73679299cc"]
.sqs-col-6 {border: 2px solid #172236;width:47%!important;margin-left: 2.5%; box-shadow: 2px 5px 10px rgba(0,0,0,0.2)}
@media only screen and (max-width:768px){ .sqs-col-6 {margin-left:0%!important;margin-bottom: 7%}} 

See screen shot of what happens to mobile view when I target. 

I did find a work around by not targeting the section, and then removing the border/ shadow effect from where it appears on all other 2 column sections... Example: 

section[data-section-id="60387a655347d0248f70c4ea"]{.sqs-col-6 {border: none; box-shadow:none}}

but I don't think that's how CSS should work. 

I am new to CSS so any help is appreciated! Thanks! 

Screen Shot 2021-02-27 at 8.12.03 PM.png

  • Replies 1
  • Views 284
  • Created
  • Last Reply
Posted
#page-section-60387a655347d0248f70c4f4 .sqs-col-6 {
  border: 2px solid #172236;
  box-shadow: 2px 5px 10px rgba(0,0,0,.2);
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  #page-section-60387a655347d0248f70c4f4 .sqs-col-6 {
    width: 47.5% !important;
    margin-left: 1.25%;
    margin-right: 1.25%;
  }
}
@media screen and (max-width: 767px) {
  #page-section-60387a655347d0248f70c4f4 .sqs-col-6 {
    margin-bottom: 35px;
  }
}

Ok so I got my question answered on another site and this was the correct way that worked! I think it was I inertially did not have a space after targeting the section. Now I know! 

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.