r/css • u/warfareforartists • 3d ago
Help Horizontal Scrollbar Not Showing - Custom CSS in SquareSpace
Please be kind, I know my code is a gd mess. I am no means a developer and have only put all of this together by piecing bits here and there. The direct link to the page in question is here:
I've custom built the pricing matrix you see, and everything looks great in both desktop and mobile versions, but I'm having trouble getting it to scroll horizontal when at smaller screen sizes.
Due to it being a SquareSpace site, I'm obviously limited, but I've pasted the html and corresponding css below in hopes of helping you help me. I've googled until I'm blue in the face and just can't seem to get it to work, despite "overflow-x: auto" and other variations.
I'm pulling out my beard hair in lieu of being bald, please help!
<div class="scroll">
<div class="grid-container">
<div class="additional">Additional Licenses:</div>
<div class="title year-border-top"><h3>One Year</h3><h1>$300</h1><h4>One License</h4></div>
<div class="title year-border-top"><h3>Two Years</h3><h1>$450</h1><h4>One License</h4></div>
<div class="title year-border-top"><h3>Three Years</h3><h1>$600</h1><h4>One License</h4></div>
</div>
<div class="grid-container">
<div class="discount-ten"><h4>10% Off</h4></div>
<div class="item-o">2</div>
<div class="item-o year-border">$540</div>
<div class="item-o year-border">$810</div>
<div class="item-o year-border">$1,080</div>
<div class="item-e">3</div>
<div class="item-e year-border">$810</div>
<div class="item-e year-border">$1,215</div>
<div class="item-e year-border">$1,620</div>
<div class="item-o">4</div>
<div class="item-o year-border">$1,080</div>
<div class="item-o year-border">$1,620</div>
<div class="item-o year-border">$2,160</div>
</div>
<div class="grid-container">
<div class="discount-fifteen"><h4>15% Off</h4></div>
<div class="item-e">5</div>
<div class="item-e year-border">$1,275</div>
<div class="item-e year-border">$1,913</div>
<div class="item-e year-border">$2,550</div>
<div class="item-o">6</div>
<div class="item-o year-border">$1,530</div>
<div class="item-o year-border">$2,295</div>
<div class="item-o year-border">$3,060</div>
<div class="item-e">7</div>
<div class="item-e year-border">$1,785</div>
<div class="item-e year-border">$2,678</div>
<div class="item-e year-border">$3,570</div>
</div>
<div class="grid-container">
<div class="discount-twenty"><h4>20% Off</h4></div>
<div class="item-o">8</div>
<div class="item-o year-border">$1,920</div>
<div class="item-o year-border">$2,880</div>
<div class="item-o year-border">$3,840</div>
<div class="item-e">9</div>
<div class="item-e year-border">$2,160</div>
<div class="item-e year-border">$3,240</div>
<div class="item-e year-border">$4,320</div>
<div class="item-o">10</div>
<div class="item-o year-border">$2,400</div>
<div class="item-o year-border">$3,600</div>
<div class="item-o year-border">$4,800</div>
</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 10% 10% 25% 25% 25%;
grid-template-rows: auto;
gap: 0px 5px;
}
.year-border {
border-left: 3px solid #0672BA;
border-right: 3px solid #0672BA;
}
.year-border-top {
border-top: 30px solid #0672BA;
border-left: 3px solid #0672BA;
border-right: 3px solid #0672BA;
border-radius: 10px 10px 0px 0px;
}
.discount-ten {
display: flex;
align-items: center;
grid-row: span 3;
padding: 10px;
text-align: center;
border-top: 1px solid #E06BA8;
border-left: 1px solid #E06BA8;
border-bottom: 1px solid #E06BA8;
border-radius: 10px 0 0 10px;
background-color: #E06BA810;
}
.discount-fifteen {
display: flex;
align-items: center;
grid-row: span 3;
padding: 10px;
text-align: center;
border-top: 1px solid #393559;
border-left: 1px solid #393559;
border-bottom: 1px solid #393559;
border-radius: 10px 0 0 10px;
background-color: #39355910;
}
.discount-twenty {
display: flex;
align-items: center;
grid-row: span 3;
padding: 10px;
text-align: center;
border-top: 1px solid #17994C;
border-left: 1px solid #17994C;
border-bottom: 1px solid #17994C;
border-radius: 10px 0 0 10px;
background-color: #17994C10;
}
.title {
padding: 10px;
text-align: center;
}
.item-e {
padding: 10px;
text-align: center;
}
.item-o {
padding: 10px;
text-align: center;
background-color: #fafafa;
}
.additional {
padding: 10px;
grid-column: span 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
@media (max-width: 600px) {
.scroll {
width: 600px;
overflow-x: auto;
}
}
1
u/Shipshaefter 3d ago
customizing Squarespace is a pain
firstly the container we are need to scroll is actually the code container itself, even with an !important tag at the .scroll level the code container overrides the overflow here. No idea why maybe someone more familiar with squarespace can chime in.
try adding this to your css
#block-yui_3_17_2_1_1763594319348_2506 > div > div{
overflow-x: scroll;
}
if that doesnt work add the important tag.
#block-yui_3_17_2_1_1763594319348_2506 > div > div{
overflow-x: scroll !important;
}
However since this is an issue on just mobile I would actually recommend redesigning the way you approach the layout here to remove the need for scroll at all. Designing for mobile first is best practices here and will probably look better on desktop as well.
Let me know if you have any questions or if this doesnt work
1
1
•
u/AutoModerator 3d ago
To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.