Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Can I add multiple css code?


Sayaka

Question

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
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

4 answers to this question

Recommended Posts

  • 0

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 8 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com Best Hourly Rate :- $15 Per Hour

Link to comment
  • 0

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