Full browser/screen width on post page (single.php)

[burbanski]

Hello,

I would like my some of my visual composer elements, images and backgrounds to full screen width on my single post pages. How do I do this?

In theme setting I’ve selected:

Layout Settings > Site Layout: Wide

Layout Settings > Main Layout: No Sidebar

Blog > Blog Page Layout: No Sidebar

Blog > Single Post Page Layout: Same as Default Page Layout

Even with all of these settings, my VC elements only go to “full width” and on full browser window width.

Thanks,

Brent

[Laura]

Hello, there are some css adjustments you need to do for that, are you still local? I could check it out if its online

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[burbanski]

Hello again, Laura.

Yes, I’m still working local.

Can you provide the css needed to make this possible? I’m guessing it goes into my child theme’s style.css file?

Thanks,
Brent

[burbanski]

Also, I just found this link.

https://vc.wpbakery.com/video-academy/full-width-row/

I have the most up-to-date version of VC, but I do not have “row width” or “row stretch” options in my editor. Is it possible that Kleo theme is restricting these options for single posts?

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[burbanski]

Thank you, Laura.

[Radu]

Hi,

I was able to make a row full width in post

You should have post layout select to full width

let me know
Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[burbanski]

Hi Radu,

My custom posts are created by users on the frontend so they are not able to select this layout option, per post, on the back end.

How can I set my CPT to always show full browser width, without having to select this option on the backend post edit page?

Thanks,
Brent

[Radu]

Hi,

Add this function to wp-content/themes/kleo-child/functions.php after you change the my-post-type name from if( is_singular(‘my-post-type’) ) in the code below

COPY CODE

/* Switch kleo layout if is specific post type */
function switch_layout_custom_cpt() {
    if( is_singular('my-post-type') ) {
        kleo_switch_layout( 'no', 15 );
    }
}
add_action('kleo_header', 'switch_layout_custom_cpt');
/* End Switch kleo layout if is specific post type */

NOTE : Child theme needs to be installed and activated.

Let me know
Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solution

What support service includes ? What not ?

[burbanski]

Hi Radu,

Unfortunately, this did not work. I replaced ‘my-post-type’ with my cpt slug name. I also tried if( is_single() ) to see if this would work on regular posts, but it had no effect either. Also cleared cache.

For testing I have set a Visual Composer rows to colorize the background full width(elements needing to go full browser width noted with red arrows):
Inner Container: No
Section style: Main styleBackground
style: Color

Any ideas as to why this function isn’t working?

Attachments:

You must be logged in to view attached files.

[Radu]

Ok,

Do you have the possibility to put the install somewhere online to can take a look at that? To can provide an accurate solution?

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[burbanski]

Hi Radu,

I’m currently working locally. Can you connect with screen share? Or can you suggest a simple option for posting my dev site online?

Thanks,
Brent

[Radu]

Hi,

Please provide entire page source on a txt file or on pastebin.com

Most sure there should be added a CSS rule, something like

.your-post-type .container {max-width:none !important;}

Show me the page source

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solution

What support service includes ? What not ?

[burbanski]

Radu,

Your CSS direction was exactly what I needed. It works perfectly!

COPY CODE

.single-directory-listing #main-container.container {
max-width: none !important;
padding: 0px  !important;
margin: 0px  !important;
}

Thank you!

[Radu]

Great!
You’re welcome
Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts