Return to previous page

CSS for mobile phone view on category page

This topic has 6 replies, 2 voices, and was last updated 8 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)