[Resolved] Font and slow load

[Author]

Posts

[Pete]

Hi there,

Just testing a revised layout and two things, on this test page:
hidden link

I can't seem, using inspector to find out why the drop down font is so fine? I've checked the CSS we've added and can't find what is making, just the text in the drop down, so fine.

Lastly, while the site has no caching activated, this is 'so slow'. If you go to location and click from the drop down Wells-next-the-Sea and apply....it must take 15 seconds to change.
Try changing the location a couple of times....it seems to get slower each time you re search something.

Sure the pagination has 12 pages however this seems an extraordinary long time to refresh. Have I done something to cause this issue?

Thank you.

[Waqar]

Hi Pete,

Thank you for contacting us and I'd be happy to assist.

> I can't seem, using inspector to find out why the drop down font is so fine? I've checked the CSS we've added and can't find what is making, just the text in the drop down, so fine.

- Using Chrome's inspect element tool, you'll note that the select/dropdown's font styles are being inherited from the Bootstrap's "form-control" class.

Screenshot: hidden link

You can adjust that font using custom CSS code, for example:

.js-wpv-filter-trigger.form-control {
    font-size: 16px;
    line-height: 1.42857143;
    color: #333333;
    font-weight: 400;
}

> Lastly, while the site has no caching activated, this is 'so slow'. If you go to location and click from the drop down Wells-next-the-Sea and apply....it must take 15 seconds to change.

- I've checked the location filter and for me, it is updating the result quite quickly without any extra delay.

Here is a screencast, showing how it is performing in my Chrome browser:
hidden link

Can you please test this again and if the issue still persists, share a video capture showing how it is performing on your screen?

regards,
Waqar

[Pete]

Morning Waqar,

Hmmm this is odd, it 'seems' fine now and sure, your helpful video shows all ok with you.
I have removed the button so results are update automatically and it works well however after changing some of the locations a couple of times, there is certainly a lag and it seems to get slower.

I don;t know how to do a video capture I'm afraid.

If a grid gets larger and larger, more pages to paginate to...do results take longer due to its size using Toolset?

Ref the font, to be fair I never use Chrome, I use FireFox...guess I should give Chrome a try 🙂

I had see this you had sent:
.js-wpv-filter-trigger.form-control {
font-size: 16px;
line-height: 1.42857143;
color: #333333;
font-weight: 400;
}

This only make the cover text bolder....select a drop down, this text is still too thin.
Any ideas on how to change this and not the font for the code you sent me please?

Many thanks 🙂

[Waqar]

Hi Pete,

Thanks for writing back.

> If a grid gets larger and larger, more pages to paginate to...do results take longer due to its size using Toolset?

- As the total number of results in the database and results to display per page will increase, the time needed to get the required data and render it on the front-end will also increase. But that increase would be gradual and hardly noticeable.

That is related to how database results and web page rendering works in general and is not something specific to Toolset or WordPress.

> Ref the font, to be fair I never use Chrome, I use FireFox...guess I should give Chrome a try 🙂

- I personally prefer Chrome's inspect element tool and here is a useful guide to get started:
hidden link

> This only make the cover text bolder....select a drop down, this text is still too thin.
Any ideas on how to change this and not the font for the code you sent me please?

- Different browsers and operating systems can apply their own styles to input elements, so the user experience can be slightly different too.

To target the text in the select/dropdown options, you can use something like:

.js-wpv-filter-trigger.form-control option {
    font-weight: bold;
}

I hope this helps.

regards,
Waqar

[Pete]

Hi there Waqar,

Seems a fair point ref the grid and load time if it is large with results. Once we've optimized images and activated server cache etc I'll see how well the larger work, if an issue I'll limit their results.

Ref the font:

Sure I know on my Mac, fonts can look very different to a PC.
What was an issue is this Home Pahe: hidden link

Check out the drop downs, this font weight is fine.
Yet on the page in question, its thinner and yet we did nothing different, in essence its a duplicated View with the filer and layout changed slightly.

Your code does the trick however unsure I'll bother, it was a lack of consistency I was uncertain why this was the case 🙂

Thank you as always for your help.

Stay safe. Pete

[Waqar]

Hi Peter,

Thanks for the update and glad that my message helped.

On my PC, I can't spot any visual difference between the select option text from those two pages, so it could be something specific to Mac.
( the CSS code applied to option tags on both pages, also appears to be the same )

In any case, you can add custom CSS styles to specifically target that text and make it consistent, across the devices.

Please let me know if you have any follow up questions and for a new question or concern, you're welcome to start a new ticket.

Have a nice weekend and stay safe,
Waqar

[Pete]

My issue is resolved now. Thank you!