[Resolved] Custom Content Types are not Responsive?

[Author]

Posts

[johnT-12]

I am trying to: I am trying to ensure my Recipes are responsive on mobiles

Link to a page where the issue can be seen: hidden link

I expected to see: I expected the image and the text to behave like a default new page in Avada.

Instead, I got: It seems to be somewhat responsive...but not entirely. on my Mobile, it looks fine when switched to "landscape" instead of "portrait" in hand.

[Nigel]

Hi John

There is nothing inherent to custom post types to make them responsive or not, it will depend upon the template used to output them.

Your theme will typically be responsive, inasmuch as it would stack sidebars underneath the main content area, which would shrink to the size of the viewport.

As for what happens inside the main content area, this is the part of the page that is taken over by Toolset when you create templates with Views (Content Templates) or Layouts (Template Layouts). (Specifically, the part of the theme single post template that outputs the_content() is what is taken over by Toolset.)

Views Content Templates are just simple freeform markup editors. If you don't add anything specific to make content within the template responsive, it won't be.

Templates made with Layouts automatically use the responsive Bootstrap grid, so that if you add two columns of six cells each, they will stack underneath each other on smaller screens, for example.

(You can add the same kind of markup to Views Content Templates to achieve a similar effect, but you would need to do that manually. If your theme had it's own grid system, you could use the required markup in your template, or if you wanted to create your own and wanted to use CSS Grids, for example, you could.)

You need to make sure Bootstrap is enabled, at Toolset > Settings. If you are using Layouts the responsive-ness should happen automatically.

Let me know if you encounter a specific issue where it is not.

[johnT-12]

Hi Nigel,

Thanks for the prompt and detailed response.

I felt as though I was missing a step somewhere using this logic:

1. New Avada pages demonstrate expected responsiveness (stack and confining content to grids) using their pre-defined template.
2. New Custom Content Type do not respect the grid sizes as expected. Therefore:
3. I must have to start with a template that Avada uses in order to realize the same effects in my Custom Content Type.

Bad logic, I guess. ?

The stacking is working as expected, so now I understand that “responsiveness” is there but needs some tweaking. My planned approach is to use CSS to try and confine the content to the grids.

Does that make sense? Or is there something more obvious that I am overlooking?

Thanks once again!

John

[Nigel]

Hi John

I'm not sure what technique Avada uses for its responsive grid, but one option which is close to your original line of attack is reproduce what it does in the markup you output using Toolset templates.

Remember, this is all just about HTML and CSS. Avada theme templates output markup with certain classes targeted by its CSS to produce the desired effect.

Toolset templates and Views are just ways of outputting markup, and you could set them up in such a way as to reproduce what Avada outputs to get the same effect.

Or, go all-in on Toolset, which uses the Bootstrap grid for its responsive layouts, meaning that you can opt for the output of Views to be in the format required by Bootstrap for its CSS to be effective, and Layouts also automatically adopts this format, whereas if you use Views Content Templates it is down to you to generate markup which fits in with one or the other, and will mean more manual intervention on your part in terms of the markup and CSS.

Except! You can create Content Templates and then design them with Avada's Fusion Builder, and if you insert sections with columns, then these will resize responsively, much like if you had made a page with Avada.

[johnT-12]

Hi Nigel,

Thanks for this. I am using Toolset to build that template, using the UI. For the most part, it seems to be working, but as per the original post, my content is not completely confined to those grids. Pictures in the Gallery are resize but not the first image, tags are bursting out of the grid too, as well as some text content. I am not sure how to approach troubleshooting this.

Can you assist with troubleshooting this? A sample of the content is here: hidden link

Short of using the Web Developer plugin for Chrome and hacking at the CSS, I really don't know where to start. And I dont want to create a nightmare for Future Me in terms of managing this.

I can provide you with temporary credentials if you wanted to hop on and take a look.

Note I am not just asking you to "make it better", I do want to understand what to look at, but in my head I am not clear on the demarcation points between WP, Avada and Toolset...how do I know which to look at?

Thank you

[Waqar]

Hi John,

Thanks for writing back.

Nigel will be away until early next week and I'll be happy to follow up on this.

The way Bootstrap's grid layout works, elements with "col-sm-" classes are shown vertically stacked on each other, on screens with a width narrower than 767px.
( ref: hidden link )

If you'll check your web page's styles, using Chrome's inspect element tool ( ref: hidden link ), you'll note that the styles being loaded through the Fusion Builder are not only assigning fixed widths to the page elements but are also overriding the default Bootstrap grid styles:

Screenshot 1: hidden link
Screenshot 2: hidden link

To get the most accurate and up-to-date information about how to make the Fusion Builder play nice with the Bootstrap, I'll recommend consulting its official support and documentation.

Meanwhile, to improve the responsiveness of your page, you can use some custom CSS code to make sure that the content and the sidebar areas are properly stacked on each other, on smaller screens:

@media only screen and (max-width: 767px) {
	#content .post-content .container {
		max-width: 100%;
	}

	#content .post-content .container .row > .col-sm-8,
	#content .post-content .container .row > .recipeSidebar {
		width: 100%;
		float: none;
		margin: 10px auto 20px;
	}
}

I hope this helps.

regards,
Waqar

[johnT-12]

This is exactly what I needed! Thank you, Gentlemen, you are a great team!

My issue is resolved now. Thank you! Much appreciated!!