Carina Theme: Blog posts not formatting to mobile view

[trinnovative]

Hello all,

I am currently redesigning my company site and have run into an interesting issue. For some reason blog posts do not adapt to the mobile view.

Every other page on the site adapts properly to the mobile view. I’m wondering what could be a cause to this.

I am using a child theme on a subfolder on my domain as I develop the new site. This may fix itself once the new site goes live however there’s nothing that I can see that would cause this to happen.

website:
http://www.trinnovative.com/redesign

At the bottom of the home page you’ll see the “knowledge” section. Clicking on one of the blog posts from a mobile device will replicate the issue.

The theme being used is linked below. Blog posts show properly in the preview of the theme.
http://web-rockstars.com/carina/

Thank you in advanced!

[7Theme Support]

Hi,

found the problem! In your source code we saw that you load the main css file after the responsive css file, and this cause the problem, because this overwrite the styles from for the responsive view. Please change this, than it’s working.

[trinnovative]

Thank you for the quick response. Considering WordPress doesn’t give full control over the header and how files are load (at least to my knowledge).

How would this be achieved?

Thank you
-BC

[trinnovative]

Any suggestions on how to address this?

-BC

[trinnovative]

Webadmin,

Can we get a response to this?

-BC

[7Theme Support]

Hi,

we found some notice in your source code from a plugin or app called “Child Theme Configurator”, it looks like the plugin / tool is not working correct, because the files are not sorted and like I told you before, the default style.css file is called after the responsive css file, this will overwrite the responsive styling. Please change this, than it’s working without any problem.

[trinnovative]

Thank you for the response. I have removed the child theme plugin as it is not necessary now.

I understand there is a style sheet loading sequence issue. In my previous response I asked how that could be changed?

All the research I have done in relation to altering the style sheet loading sequence only addresses plugins.

How can I asked the listing sequence?

I’ve moved the site to my main directory.
http://www.trinnovative.com

Thank you,
-BC

[7Theme Support]

Hi,

I would never use plugins to create a child theme, the best is always to do it yourself.

Here is the official guide to create child themes, if you work with this guide then there will be no problem:

https://codex.wordpress.org/Child_Themes

[trinnovative]

Thank you for the response.

I have rebuilt the child theme the proper way and removed the plugins.

I have also setup the proper enqueueing of the style sheets so the responsive.css sheet loads last.

Despite that the issue still exists; keep in mind this is only present in the blog area. This issue is not present on the home page or any other pages.

again here’s the link.

http://www.trinnovative.com

-BC

[7Theme Support]

Hi BC,

we’ve checked the source code and it’s still the same problem, the responive style is loaded before the default style files, this will overwrite the responsive settings.

You can try this: open the style.css file or your child theme and add this to the end of the file:

.single-post #content, .single-post #page-sidebar-left, .single-post #page-sidebar-right, .single-post #page-sidebar-no-sidebar {
	max-width: 100%;
}

This should solve the problem

[trinnovative]

Unfortunately that doesn’t solve the issue.

Also the responsive.css is the last style loaded. It’s actually loaded twice due to my call to enqueuing the style sheet at the end.

Rebuilding the theme didn’t change the order in which the style sheets were loaded.

-BC

[7Theme Support]

Hi,

we’ve tested it on your website, and it looks like its working. Can you clear your browser cache and try it again?

[Author]

Posts