Skip Navigation

[Resolved] Split: Images are not extending to full width

This thread is resolved. Here is a description of the problem and solution.

Problem:

I just realized that another problem that seems to have occurred with the toolset installation is that the images that are supposed to extend to full width are only going to the in-container size.

For example, on the biography page, the banner img row is set to full-width, but it is not showing as such. The same is true for all the other full-width settings.

Solution:

This is a CSS problem, see the detail solution here:

https://toolset.com/forums/topic/split-images-are-not-extending-to-full-width/#post-1123252

Relevant Documentation:

This support ticket is created 6 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 7 replies, has 3 voices.

Last updated by mystieC 6 years, 1 month ago.

Assisted by: Luo Yang.

Author
Posts
#1121652

I just realized that another problem that seems to have occurred with the toolset installation is that the images that are supposed to extend to full width are only going to the in-container size.

For example, on the biography page, the banner img row is set to full-width, but it is not showing as such. The same is true for all the other full-width settings.

I've included images of how the theme is supposed to respond and additional images and links to my own pages where they are not responding correctly.

biography page banner image: hidden link
home page: the black box around "What I'm listening to right now" should also be full width and so should the image of the water with a floating balloon beneath it.

All screenshots here: hidden link

#1121936

Are you using Visual Composer and Toolset Layouts together?
This should not be done, as two-page builders at once, are not intended for a WordPress install.
I am not sure if you use Layouts, the Page source is not entirely indicating ddl div classes, but I see it enqueued and mentioned as well in the previous ticket of yours.
You would have to use either or, Layouts or Visual Composer.

In Layouts, you can change the background (width) of Cells when you edit the Layout.
There, you can choose the full width, background extension or container fit.
If you use Layouts that is where you'd change those settings.

I think the issues you face as mentioned as well in the other ticket (upon install, as you say) are due to a conflict with either a plugin or theme that loads bootstrap as well or a very similar stylesheet
Can you try what is solved or not when you alter Toolset > Settings > General > Bootstrap loading?
I think that, along with removing Layouts from the site (if used) or Visual composer, will resolve the problems

Since you get these issues upon install, it is not adequate to provide a fix as in the other ticket which just hides the issue
I want to know why this happens.
Then, we can fix it and make your experience better using Toolset.

Please, can you test this, if the issues are not solved with the above suggestions?
1. Try with just Toolset and a native Theme
2. Re-enable other software until the issue happens again
3. Tell me what software is causing the conflict

I am almost sure, as soon you play with the Bootstrap settings you will notice differences, and if so it'd point to the above mentioned possible similar Bootstrap loaded by theme or plugins on your site.
In that case, simply disable Toolset Bootstrap loading.

#1122031
Screen Shot 2018-10-06 at 4.24.20 PM.png
Screen Shot 2018-10-06 at 4.23.34 PM.png
Screen Shot 2018-10-06 at 4.22.49 PM.png

Thank you so much for all the help.

So the first thing... I changed the Bootstrap settings to the comes with the theme option, and that helped fix the full page views that were affected on the home page and Biography page.

However, then I deactivated the layouts plug-in so that I can use wpbakery as the sole editor, and the pages I created for single portfolio pages and custom post type stories have disappeared altogether. I've included screenshots of how the single story page looks with layouts activated, how a single portfolio page looks with layouts activated and of how the same single portfolio page content disappears with layouts not activated. The same thing happens to the single story page...it just doesn't show any content at all.

#1122057

I guess I should say single posts...rather

Also, the Bootstrap fix did not fix the fullwidth issue on the single stories page with I gather has to do with the the layouts issue in some way.

#1122273

So here's what I discovered after some testing:

As I said, changing the Bootstrap setting fixed the full-width issue only on the home page and Biography page...basically any of the pages templates that came with the theme.

However, on any custom post type, I can not get the full-width to work. This may be related to using both WPBakery and layouts. But as I mentioned above, if I disable Layouts, none of the content templates work. All I get is a blank page where the content should be. That said, the workaround I used was creating a content page in WPBakery visual composer and then adding it in layouts through the content page cell.

This may be related to why I can't add full-width on any custom post types (I don't know), but if you can figure out a better fix that doesn't require PHP knowledge, I'd be ecstatic.

Basically, From a visual, I'm trying to get the single stories posts to look more like the biography page than the blog posts. Ideally, that includes using the featured post at full-width at the top of the screen.

#1122543

Hello,

If you are using Layouts plugin to design your page/post, please follow our document to setup the row as full-width, and test again:
https://toolset.com/documentation/user-guides/learn-how-rows-can-displayed-different-ways/

If you still need assistance for it, please provide a test site with the same problem, also point out the problem page URL and layout URL, I need a live website to test and debug.

#1123252

Thanks for the details, I have done below modification in your website:
1) Edit the layout
hidden link

Add a visual editor cell, with only the post content shortcode:

<p>{!{wpv-post-body view_template='None'}!}</p>

You can remove the content template cell if it is needed.

2) Dashboard-> Toolset-> Layout CSS and JS-> CSS Editor, add below CSS code:

.single-story .boxed{
max-width: 100% !important;
}

It will take effect on single "Story" post

Test it in front-end:
hidden link

Please check if it is fixed.

#1126553

My issue seems to be resolved now. Thank you!