Jump to content

How can I have equal space for my shop items so that there is less space between them for mobile?

Recommended Posts

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;
  }
}

 



 

Screenshot 2023-09-20 at 13.21.19.png

Edited by Oliokd123
spelling
Link to comment
  • Replies 16
  • Views 1.7k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

@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 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 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

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 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 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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

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