Jump to content

Can I add multiple css code?

Recommended Posts

Site URL: https://www.femmesdesakura.com/

Hello, I have no knowledge in coding and this is very difficult for me...

There are two things I want to do:

1) make images on the homepage smaller on mobile

2)add column to the product page on mobile so that there are 2 columns of product selection. (Currently i see a huge pic of one product at a time) I want to make it look like atached pic. 

When I added a code for 1), it worked, but when i added a code for 2) right below the code for 1), it didn't work. 

I'm not even sure whether i can add multiple code for mutiple purposes, but if anyone could help me out, I really appreciate it!

IMG_5823.PNG

Link to comment
  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

past this code in custom css box

 

@media screen and (max-width:767px) {
.products .list-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 20px;
}
}

Hi, I'm BITTU. A website developer with 10 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com

Website:-  dhanjalsolution.com

Best Hourly Rate :- $15 Per Hour

Link to comment

So is this gonna be all the code??

/* CSS FOR TABLET AND MOBILE */
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)";
/*

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/


  /* Insert Code for Tablet Above This Line */
}


/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
 .sqs-block-image {
  width: 60%;
  margin: 0 auto;

  /* Insert Code for Mobile Above This Line */
}

@media screen and (max-width:767px) {
.products .list-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 20px;
}
}

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.