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

This topic has 14 replies, 3 voices, and was last updated 7 years by Radu.

Author
May 4, 2017 at 04:35 #160309

burbanski
Participant

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

May 4, 2017 at 19:08 #160420

Laura
Moderator

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 🙂

May 4, 2017 at 21:26 #160440

burbanski
Participant

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

May 4, 2017 at 22:43 #160462

burbanski
Participant

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?

May 8, 2017 at 01:11 #160637

Laura
Moderator

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 🙂

May 8, 2017 at 07:43 #160653

burbanski
Participant

Thank you, Laura.

May 9, 2017 at 18:27 #160794

Radu
Moderator

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 ?

May 10, 2017 at 09:51 #160905

burbanski
Participant

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
May 11, 2017 at 17:20 #161046

Radu
Moderator
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 ?
May 11, 2017 at 19:33 #161066

burbanski
Participant

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.

May 11, 2017 at 21:43 #161147

Radu
Moderator

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 ?

May 11, 2017 at 21:46 #161151

burbanski
Participant

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

May 12, 2017 at 23:59 #161255

Radu
Moderator

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 ?
May 13, 2017 at 03:14 #161262

burbanski
Participant
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!
May 15, 2017 at 18:06 #161469

Radu
Moderator

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