Return to previous page

Need Custom CSS to apply font-size to grid and list views

This topic has 11 replies, 3 voices, and was last updated 1 years, 11 months ago ago by Tony Rodriguez

johnm

Participant

January 14, 2023 at 16:38

I was able to correct a lot of missing font-size values on headings and body content by applying custom css globally. I have 6 pages where I’m getting missing font-size error, and they are all shop and product category pages where there is either a grid or list view. I would like to apply custom css to resolve this as well, but I can’t find examples or syntax on the web. Can you provide me css to put into theme options to apply font-size to the lines below? I’ll also put my existing css below that for your reference. Thanks!

[a data-type=”grid” href=”https://www.discountkeystore.com/product-category/office-suites/?view_mode=grid”> Grid[/a]

[a data-type=”list” href=”https://www.discountkeystore.com/product-category/office-suites/?view_mode=list”> List[/a]

a {
text-decoration: underline; font-size: 10pt;
}
h1 {
font-size: 20pt;
}
h2 {
font-size: 20pt;
}
h3 {
font-size: 18pt;
}
h4 {
font-size: 16pt;
}
#content .page .entry-title {
font-weight: 700;
font-size: 30px;
}

#344008 Copied Theme version: 9.0.2 WooCommerce version: 7.3.0

10 Answers

Tony Rodriguez

Support staff

January 14, 2023 at 19:18

Hello, @johnm,

Could you please share the screenshot as well from this page: https://www.discountkeystore.com/product-category/office-suites/ which part do you want to change the font size, please mark it on the screenshot as well so that I will check it accordingly on your site and help you out.

You may use this site to upload and share the screenshot here: https://imgbb.com/

Regards 8Themes Team.

#344017 Copied

johnm

Participant

January 14, 2023 at 19:39

Thanks Tony, but I’m not even sure which part of the page those lines are referring to. I’m attaching credentials to my code scanner report. If you look on the Issues tab, then Search tab, the Priority 3 issues are pretty much the same for all of the 6 pages affected. I’m just trying to make these errors go away so Google will accept my landing pages for ads, and I think as long as there is some value for font-type, it will work.

I’m attaching credentials to my site as well in case you need to look at the theme/code.

Please contact administrator
for this information.

#344019 Copied

Rose Tyler

Support staff

January 15, 2023 at 09:54

Hello, Johnm

Thanks for the reply.
Another specialist will get back to you after a detailed review. Please be patient and do not change access.

Regards

#344036 Copied

Rose Tyler

Support staff

January 16, 2023 at 09:15

Hello, Johnm,

You need to find where the pt units https://prnt.sc/gsIlG2WZmB5P are set and replace them with values in px.

Please let us know if it helped or if you have any further questions or concerns. We are always here to help.

Best Regards,
8Theme’s Team

#344111 Copied

johnm

Participant

January 16, 2023 at 13:33

Thanks Rose. I tried to resolve that by putting the following into global custom css, but it didn’t resolve the problem. Suggestions?

p {
font-size: 12pt;
}

#344126 Copied

Rose Tyler

Support staff

January 16, 2023 at 14:25

Hello, Johnm,

You need to find out where exactly in settings you set values in pt and change it there.

Best Regards,
8Theme’s Team

#344131 Copied
johnm

Participant

January 16, 2023 at 18:18
Thanks Rose. I found the two places in question; I’ve pasted them below. I’ve never set values there, and because there is no font size specified on these lines, the scanner thinks the font size is zero, so yes, I need to change it. My problem is that I don’t know how to change it either in Theme Options, or via global custom css. I was hoping you could tell me the right syntax to do so in global custom css. I’m not good with coding, so I appreciate your help. Thank you.
```
<div class="switch-grid switcher-active">
<a data-type="grid" href="https://www.discountkeystore.com/product-category/office-suites/?view_mode=grid">Grid</a>
</div>

<div class="switch-list ">
<a data-type="list" href="https://www.discountkeystore.com/product-category/office-suites/?view_mode=list">List</a>
</div>
```
#344154 Copied
Tony Rodriguez

Support staff

January 17, 2023 at 05:38
Hello, @johnm,

Ok then please try with the below given Custom CSS code, Please copy and paste the below given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back to your site after removing the browser cache.
```
.switch-grid.switcher-active a{
font-size: 12pt !important;
}
.switch-list a{
font-size: 12pt !important;
}
```
And then check back to your site after removing the browser cache.

Regards 8Themes Team.
#344165 Copied
johnm

Participant

January 17, 2023 at 12:40

Yes! That got it. Thank you!

#344211 Copied

Tony Rodriguez

Support staff

January 17, 2023 at 14:17

Hello, @johnm,

Well, we are thrilled that our proposed solution helped you in solving your issue.

Feel free to write us back anytime, we are always here to help you.
Thanks for contacting us.

Have a nice day. ?
Topic Closed.

Regards 8Themes Team.

#344218 Copied
Tagged: font size, grid, list, views, woocommerce, wordpress
Viewing 11 results - 1 through 11 (of 11 total)

The issue related to '‘Need Custom CSS to apply font-size to grid and list views’' has been successfully resolved, and the topic is now closed for further responses

Need Custom CSS to apply font-size to grid and list views

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection