ccpjames Posted February 28, 2021 Posted February 28, 2021 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!
ccpjames Posted March 1, 2021 Author Posted March 1, 2021 #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!
Recommended Posts
Archived
This topic is now archived and is closed to further replies.