Return to previous page

CSS for mobile phone view on category page

This topic has 6 replies, 2 voices, and was last updated 7 years ago ago by Rose Tyler

Lily

Participant

November 8, 2017 at 17:48

Hi,

We have some bespoke coding for our category page, to decrease or increase the gap between ‘Product name and Product Price, see here: https://screencast.com/t/gMHHHJLTC92N

And it works well, but unfortunately not on mobile phones.

See here: https://screencast.com/t/UYlzxvdBHSUL

What is the CSS I need to narrow this gap?

#177144 Copied

5 Answers
Rose Tyler

Support staff

November 9, 2017 at 09:14
Hello,

Please find this code in your custom.css
```
 .products-grid .product .add-to-container{
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
}  
```
and change to
```
@media (min-width:480px){
  .products-grid .product .add-to-container{
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  }  
}
```
Regards
#177186 Copied
Lily

Participant

November 10, 2017 at 10:05

Hi

I have applied the CSS but the gap on mobile still appears to be the same?

I am sure cache has been cleared, but so not sure anything has changed

#177303 Copied

Rose Tyler

Support staff

November 10, 2017 at 10:12

Hello,

Could you please provide wp-admin access in Private Content?

Regards

#177308 Copied

Lily

Participant

November 17, 2017 at 12:34

Sorry for delay I thought I had sent already

Please, contact administrator
for this information.

#177897 Copied

Rose Tyler

Support staff

November 17, 2017 at 13:12

You need to add custom css code in custom.css file of legenda parent theme or in style.css file of child theme. Custom.css file of child theme woun’t work correctly, so I would recommend you to transfer all your custom code in style.css file of child theme.
Let us know if you need any further assistance.

Regards

#177905 Copied
Viewing 6 results - 1 through 6 (of 6 total)