Site optimization

Hi, I’m trying to fix the layout for my site. Essentially, I’m having an issue with The Grid and the Classic Recent Post element appearing terribly on small screen devices like 13.3inch laptop, phones, etc…

Basically, I’m wondering if there’d be a way to keep everything in the same row so that the site looks like the way it does on larger screens without causing any issues.

I want to keep the screen/posts/elements looking like this

Instead of this

Similarly, with the recent posts element

As well, I have a counter element that’s doing the same thing and a content element with embedded videos which is also doing the same thing. What are my options to address these issues?

Also, if you could include any other tips/pointers on optimizing the speed of the site as a whole since it seems like there are some issues like JS parsing, style and script orders, page redirects (GTmetrix).

I tried downloading a Defer JS parsing plugin for WP called Async JavaScript but it appears to be doing nothing. Is it a conflict with X? As for the style and script orders, I can’t figure them out for X and I don’t really wanna screw anything up.

Thanks in advance for the assistance.

Hi @vividtreks,

Thanks for writing in.

Please check the link below. It will you increase your site speed.

Hope it helps.

Let us know how it goes.

Thanks

Thanks for the resource,

What about straightening out the elements/The grid?

Hi There,

You can set the number of grid items per row under Responsive Settings when you edit your grids:


Hope it helps :slight_smile:

It looks horrible with 3 columns on mobile and small tablet. Is there a way to fix the formatting? I’d prefer to show the 3 columns together.

Also, the post title keeps hyphenating even though I put in some code one of your staff members provided me with to stop the hyphenations.

Hello There,

It will not look good in smaller screens because there aren’t enough space to display 3 columns. You will need to adjust it to two columns or just one column when you are viewing it in smaller devices. You can really achieve the same column heights or inline items since the length of the titles, the tags and the height of the texts would be different for each items.

Hope this helps.

So, it seems I’ve got a new issue popping up with the letters not fitting in their borders. On my site, vividtreks.com, I see this on my posts page

Hello There,

Your font size is way to big which results to the lack of space for the titles. You will need to resize the font size of those titles. Please find this css code block:

.x-iso-container-posts.cols-3 .entry-title {
    font-size: 150%;
}

And replace it with 110%.

.x-iso-container-posts.cols-3 .entry-title {
    font-size: 110%;
}

With smaller font size, you will have this:

Hope this helps.

Hi,

Thanks for helping me out again @RueNel.

I’m not able to find the .x-iso-container css block in my global CSS. Since I wasn’t able to find it, I just added it. Seems to have done the job.

Hey There,

It’s good to know that adding the css code works out for you.
If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.