will2 Posted January 26 Share Posted January 26 (edited) Hi There:) I would be really grateful if anyone can help at all I just cant seem to solve this issue myself:) I am trying to create even white borders around all of my content across mobile and desktop. I am really struggling to get this to work, it seems to work on desktop but on mobile the images above the gallery block don't show a border on the left and right, if I try to add this in in (adding border to whole site, adding img padding, adding margins etc) it adds this also onto the gallery block too which means the gallery block has a larger border than the green image above. To summarise what i am trying to achieve is - Even white borders/white space around every image (not doubled up vertically) - Even gap between images in the gallery block. - For this to somehow work across both mobile and desktop - Everything to line up - I need to duplicate this page and apply it to lots of other pages so im hoping for a solution that could be a site wide change rather than targeting specific sections I have attached a screen shot to show the issue and what i'm hoping to achieve and the very messy css that i have currently added:) Thanks in advance for any help:) the site address is https://green-aardvark-exdh.squarespace.com/ the password is - testing123 The page that shows the issue is called - /work5/norlo-border-issue /*STYLING THE ACTIVE NAV LINKS IN SQUARESPACE 7.1*/ //Mobile active link :is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content { background-image: none; text-decoration: underline; } /*---hover effect on portfolio grid---*/ .grid-item:hover img:hover { transform: scale(1.1); -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } /*----Desktop Fonts----*/ h1{ font-size:3em !important; } h2{ font-size:2em !important; } h3{ font-size:5em; line-height:1em!important; } .header-menu-nav-item a { font-size:9vw!important; line-height:6vw!important; } /*---DESKTOP Project Next Titles and Arrows---*/ .item-pagination-link .item-pagination-title { margin: 0; padding: 0; line-height: 1; font-size:1.5vw!important; padding:10px; } .item-pagination-link .item-pagination-icon svg { width: 15px; height: 41px!important; } .icon--stroke svg { stroke-width: 3px; fill: transparent; } /*---Mobile Fonts---*/ @media screen and (max-width:767px) { h1{ font-size:1.4em !important; } h2{ font-size:1.2em !important; } h3{ font-size:2.5em; line-height:1em!important; } /*---Mobile Fonts - SECONDARY BUTTON SIZING ON MOBILE---*/ div.button-block a[class*="secondary sqs-block-button-element"].sqs-block-button-element { font-size: 1em !important; padding-top: 5px !important; padding-bottom: 5px !important; padding-left: 2px !important; padding-right: 2px !important; height: auto !important; } /*---Mobile Fonts - HIDE SCROLLING TYPE ON MOBILE---*/ .Marquee-svg{ display:none; } /*---MOBILE Project Next Titles---*/ .item-pagination-link .item-pagination-title { margin: 0; padding: 0; line-height: 3.5vw; font-size:3vw!important; } .item-pagination-link .item-pagination-icon svg { width: 15px; height: 35px!important; } .icon--stroke svg { stroke-width: 3px; fill: transparent; } } .header-menu-nav-item a{ text-align:left; } /*---DELETE if nothing effected???????????????????? [data-section-id="ID_HERE"] { min-height:clamp(0px, 56.25vw, 100vh) !important; } */ /*---BURGER MENU---*/ /*---BURGER MENU THICKNESS---*/ .top-bun, .patty, .bottom-bun { height: 5px !important; } /*---END BURGER MENU THICKNESS---*/ div.header-nav-item--active a { background-image: none !important; } .header-menu-nav-item a { font-size: 10vw; line-height:5.5vw; font-weight:800!important; } .header-burger { display:flex!important } .header--menu-open .header-menu { opacity: 1!important; visibility: visible!important; } .header-nav, .header-actions { visibility:hidden!important } /*----END BURGER MENU---*/ Edited January 26 by will2 Link to comment
tuanphan Posted January 28 Share Posted January 28 Which page are you referring to? I don't see it on homepage https://green-aardvark-exdh.squarespace.com/ 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment