Oliokd123 Posted September 20, 2023 Share Posted September 20, 2023 (edited) Hello , please can you help?I am having issues with my shop on mobile( https://www.oliknowles.com). I have some custom CSS code which I think is conflicting with the store layout on mobile however I have been trying to rectify it but I can't get anywhere! When you look at the store on mobile the spacing is all wrong it should be neater and more compact, 2 items wide like the image below. I've also added my css code ; /* CSS stylesheet with various style rules and comments */ /* Invert colors of specific image */ #collection-63f4dda2fbc59a38ea3e8071 .header-title-logo img { -webkit-filter: invert(100%); filter: invert(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1'); } /* Hide specific grid items on desktop */ .ProductItem-relatedProducts .list-grid .grid-item:nth-child(n+4) { display: none; } /* Show additional grid items on mobile */ @media only screen and (max-width: 640px) { .ProductItem-relatedProducts .list-grid .grid-item:nth-child(n+5) { display: block; } } /* Bold text in a specific section */ section[data-section-id="63f4dda3fbc59a38ea3e8097"] .product-price { font-weight: bold; } /* Remove background from a folder content */ .header-nav-folder-content { background: transparent !important; } /* Sticky sidebar for product categories */ .products.collection-content-wrapper .nested-category-tree-wrapper { top: 60px; position: -webkit-sticky; position: sticky; z-index: 9999; } /* Styling for a specific class */ .sqs-money-native { color: white; font-size: 20px; background: #31CE95; border-radius: 50px; padding: 10px 20px; } /* Styling for a fixed position element */ 643aca269fa02e5221e75a8e { position: fixed; top: 600; width: 50%; } /* Styling for a custom image slider */ .custom-image-slider { position: relative; width: 100%; overflow: show; height: 0; padding-bottom: 140%; /* Adjust this value according to your image aspect ratio */ } /* Styling for elements in the image slider */ .slider-before, .slider-after { position: absolute; width: 100%; display: block; top: 0; left: 0; height: 100%; object-fit: cover; } /* Styling for the 'after' part of the slider */ .slider-after { overflow: hidden; } /* Styling for the slider handle */ .slider-handle { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background-color: #fff; cursor: ew-resize; } /* Styling for slider handle arrows */ .slider-handle::before, .slider-handle::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; cursor: ew-resize; transition: all 0.2s ease-out; /* Add transition property */ } /* Styling for slider handle arrow before */ .slider-handle::before { left: -24px; border-right: 16px solid #fff; } /* Styling for slider handle arrow after */ .slider-handle::after { right: -24px; border-left: 16px solid #fff; } /* Disable folder title links */ .header-nav-folder-title { pointer-events: none !important; } /* Hover effect on portfolio items */ .portfolio-hover-item-content:hover { font-style: italic; } /* Hover effect on portfolio item text */ .portfolio-hover-items-list:hover span.portfolio-hover-item-content { color: rgba(255, 255, 255, 0.3); } /* Hover effect on portfolio item text when hovered */ .portfolio-hover-items-list:hover span.portfolio-hover-item-content:hover { color: #fff; } /* Adjust layout on small screens */ @media only screen and (max-width: 767px) { .products .list-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .products .grid-item { width: 48%; } } /* Adjust layout on even smaller screens */ @media only screen and (max-width: 640px) { .YOUR-ITEMS-YOU-MIGHT-LIKE-SECTION-CLASS { display: grid; grid-template-columns: repeat(2, 1fr); /* Adjust the number of columns as needed */ grid-gap: 20px; /* Adjust the gap between items as needed */ } } /* Set background color of the body */ body { background-color: white !important; } /* Styling for SVG elements */ .svg-container { width: 100%; height: auto; position: relative; } /* SVG animation */ #animated-svg .cls-1 { fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 6s linear forwards; } /* Keyframes animation */ @keyframes draw { to { stroke-dashoffset: 0; } } /* Zoom effect on accordion panel content */ #block-177826ff908d4b360137 .sqs-accordion-panel-content p { transition: transform 0.3s ease; transform: scale(1.3); } /* Reset zoom effect on accordion panel content on hover out */ #block-177826ff908d4b360137 .sqs-accordion-panel-content p { transition: transform 0.0s ease; transform: scale(1); } /* Styling for a fixed position element */ .brand { position: fixed; top: 50%; left: -100%; opacity: 0; white-space: nowrap; transition: left 1s, opacity 1s; } /* Styling for an active fixed position element */ .brand.active { left: calc(50% - 50vw); opacity: 1; } /* Styling for moving a fixed position element to the right */ .brand.move-right { left: calc(50% + 50vw - 100%); } /* Media query for adjusting the position on larger screens */ @media (min-width: 768px) { .brand.active { left: 50%; transform: translateX(-50%); } .brand.move-right { left: calc(50% + 50vw - 70%); } } /* Styling for a button element */ #block-e57ffd80610b7594ce81 .sqs-block-button-element { background-color: #3f8f96; color: #f4f2eb; } /* Styling for accordion block icons */ /* Sets the background image for the arrow container */ .accordion-block .arrow-container { background-image: url(https://static1.squarespace.com/static/63f369c0f2b5595ccc770837/t/64ae8468a037630b0bd7909c/1689158760735/icons8-check-500-01.png); background-position: center; background-repeat: no-repeat; background-size: contain; } /* Hides the arrow */ .accordion-block .arrow { display: none; } /* Changes the background image of the arrow container when the accordion item is open */ .accordion-item[data-is-open="true"] .arrow-container { background-image: url(https://static1.squarespace.com/static/63f369c0f2b5595ccc770837/t/64ae96d708669044c7be9d40/1689163480057/v2+icons8-ok-500-01.png); } /* Default CSS styling for various elements */ /* Main CSS styles for filtering and displaying products */ .filterTab_area { padding-top: 0px; } /* Styling for an active button */ button.active { background: black; color: #fff; } /* Styling for a grid of products */ .product_area-products { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20px; row-gap: 20px; margin-top: 80px; } /* Styling for individual product items */ .product_area-product { text-align: center; background: #f0f0f0; position: relative; overflow: hidden; } /* Styling for product images */ .product_area-product img { transition: transform 0.3s ease; } /* Hover effect for product images */ .product_area-product:hover img { transform: scale(1.0); } /* Styling for product content overlay */ .product_area-product-content { background: rgba(35, 35, 35, 0.65); /* #232323 with 65% opacity */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } /* Display product content overlay on hover */ .product_area-product:hover .product_area-product-content { opacity: 1; } /* Styling for product content text */ .product_area-product-content h3 { visibility: hidden; font-weight: 300; margin-bottom: 10px; color: white; /* Set the text color to white */ } /* Display product content text on hover */ .product_area-product:hover .product_area-product-content h3 { visibility: visible; } /* Styling for filter buttons */ .filterTab_area-buttons { display: flex; justify-content: space-evenly; /* Updated to evenly space the buttons */ align-items: center; gap: 10px; } /* Styling for individual filter buttons */ .filterTab_area-buttons button { padding: 10px 30px; border-radius: 50px; cursor: pointer; background-color: transparent; border: none; color: #2D2A27; /* Set the text color for the buttons to the same as the lines */ position: relative; overflow: hidden; transition: color 0.3s ease; } /* Styling for active filter buttons */ .filterTab_area-buttons button.active { color: #fff; /* Set the active button text color to white */ } /* Styling for filter buttons with specific data attributes */ .filterTab_area-buttons button[data-filter="all"].active { background-color: #232323; /* Changed to #F5500D (orange) */ } .filterTab_area-buttons button[data-filter="bespoke-illustration"].active { background-color: #2E6400; /* Changed to #3F8F96 (blue) */ } .filterTab_area-buttons button[data-filter="wedding-stationery"].active { background-color: #3F8F96; /* Changed to #2E6400 (green) */ } .filterTab_area-buttons button[data-filter="brand-identity"].active { background-color: #BE4126; /* Changed to #BE4126 (red) */ } /* Media queries for responsive design */ /* Media queries for medium and small screens */ @media screen and (max-width: 1024px) { .product_area-products { margin: 0 20px; padding-top: 60px; grid-template-columns: repeat(2, 1fr); } .card { overflow-x: auto; overflow-y: auto; text-align: justify; } .filterTab_area-buttons { flex-wrap: wrap; } .product_area-product-content { text-align: center; } } /* Media queries for small screens */ @media screen and (max-width: 600px) { .product_area-products { grid-template-columns: 1fr; /* Revert back to one column (one image wide) on mobile */ } .card { overflow-x: auto; overflow-y: auto; text-align: justify; } .product_area-product-content { text-align: center; } section[data-section-id="63f4dda3fbc59a38ea3e8097"] .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1px; } #cart { color: #232323; } } Edited September 20, 2023 by Oliokd123 spelling Link to comment
Lesum Posted September 20, 2023 Share Posted September 20, 2023 @Oliokd123 You can add this code snippet within the Custom CSS panel: @media only screen and (max-width: 767px) { .products .grid-item { width: 100% !important; } } Note: Add the code after everything you've added so far. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Oliokd123 Posted September 20, 2023 Author Share Posted September 20, 2023 thanks for replying , it doesn't solve the issue sadly Link to comment
Lesum Posted September 20, 2023 Share Posted September 20, 2023 (edited) @Oliokd123 Not sure, where/how you added the code. I'm not seeing the code being added to your site. Code I provided should solve the issue. Edited September 20, 2023 by Lesum If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Oliokd123 Posted September 20, 2023 Author Share Posted September 20, 2023 Hi Lesum , it didn't work so I removed it however i've added it now for you to see., thanks for taking the time to look. Link to comment
Lesum Posted September 20, 2023 Share Posted September 20, 2023 @Oliokd123 Still doesn't look like code was applied. It looks like this after after adding the code: Could you maybe share a screenshot where you added the code? If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Oliokd123 Posted September 20, 2023 Author Share Posted September 20, 2023 how strange! Link to comment
Lesum Posted September 20, 2023 Share Posted September 20, 2023 @Oliokd123 "}" in line 420 is a syntax error. Remove line 420 from the code. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Lesum Posted September 20, 2023 Share Posted September 20, 2023 (edited) Sorry just checked the code you shared. Don't remove line 420. Add the code I provided at the end of line 420; at the end of everything you've added so far. Edited September 20, 2023 by Lesum If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Oliokd123 Posted September 20, 2023 Author Share Posted September 20, 2023 that seems to work it however it now has knocked the rest of my code out for some reason. Do you mind pasting all the code with the coreect syntax. Apologies I am new to this and learning Link to comment
Lesum Posted September 20, 2023 Share Posted September 20, 2023 @Oliokd123 No worries. You pasted the code inside another code block, so it wasn't working. If you add the code I provided at the end of all the code you had previously, it'll fix the issue. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Oliokd123 Posted September 20, 2023 Author Share Posted September 20, 2023 Okay so i've done that and it's knocked out the rest of my code, there code be a syntax error again judging from the missing { Link to comment
Lesum Posted September 20, 2023 Share Posted September 20, 2023 @Oliokd123 Add a "}" after line 416 Oliokd123 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Oliokd123 Posted September 20, 2023 Author Share Posted September 20, 2023 IS this correct ? It's still stating a syntax error with a missing closing } section[data-section-id="63f4dda3fbc59a38ea3e8097"] .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1px; } #cart { color: #232323; } @media only screen and (max-width: 767px) { .products .grid-item { width: 100% !important; } Link to comment
Oliokd123 Posted September 20, 2023 Author Share Posted September 20, 2023 Thank You so much it's fixed it ! I really appreciate it Lesum 1 Link to comment
Oliokd123 Posted September 20, 2023 Author Share Posted September 20, 2023 Sorry i've just noticed that it has now changed the cart colour to that only on mobile because of that order, is there a way of changing it? Link to comment
Lesum Posted September 20, 2023 Share Posted September 20, 2023 @Oliokd123 I replied to your other post. If you've added the code correctly, there shouldn't be any issue. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? 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