Search Results for 'page width'

[Marty]

Marty

#232179

Okay, I played with it some more using the second recommended change above, I slowly (increased) changed the width of the browser on the home page, http://www.ahyoudmd.dreamhosters.com. The two do align until you go wider than around 1700px (width of content and Kadence Blocks alignwide = 1450). What I see is the Virtue Theme content slowly grows (this seems correct) and going above 1700px the Kadence Block alignwide section is reduced by 200px, to around 1250px. So it seems the Theme with this change works, but now Kadence Block Row width is acting strange at a width > 1700. As the Window is made wider than 1700, the Kadence row content should not reduce by 200px, it should slowly increase too, shouldn’t it?

I see this…

@media (min-width: 1700px)
.main:not(.col-lg-9) .entry-content .alignwide {
width: 72vw;
margin-left: -36vw;
margin-right: -36vw
}

@media (min-width: 1400px)
.main:not(.col-lg-9) .entry-content .alignwide {
width: 84vw;
margin-left: -42vw;
margin-right: -42vw;
}
Is this correct?

I guess I can add this to make them match?

@media (min-width: 1700px) {
.container {
width: 72vw;
}
#content {
padding: 0;
}
}

Adding this makes the left edge of the content areas (the Theme Home controlled sections and Kadence Block Row section) align but not the right edge. The width of the Kadence Row section (starting with “Welcome”) does not continue to widen on the right edge. However, using Kadence Blocks Splitcontent section does work. The left edge of the content (the Theme Home controlled sections and Kadence Block Splitcontent section) does align as the window is made wider.

[Marty]

Marty

#232118

http://www.ahyoudmd.dreamhosters.com

On the Home page, there is an image menu and page content in a row, where the row is set to “wide width”, not normal or full width. The content of the row is wider than the Theme max-width when you stretch out the browser window 1800 pixels wide. I an using Virtue Premium and Kadence Blocks.

[Ben Ritner]

Ben Ritner

#232085

You can make all pages transparent by updating your css to this but note that this is not how virtue is designed and there may be unseen side effects.

.stickyheader #kad-banner {
    position: absolute;
    width: 100%;
    background: transparent;
    transition:background .3s ease;
}
.admin-bar.stickyheader #kad-banner {
     position: absolute;
     top:32px;
}
.stickyheader .is-sticky #kad-banner { 
background:  rgba(0,51,204,0.9);
}
#kad-banner-sticky-wrapper {
    height: 0 !important;
}

[Daniel]

Daniel

#232034

Hey,

Thanks for your help with my other questions. Another quick question, how do you adjust the header to be full width and full height if using the Home Page Title option? It’s already full width, but its not full height. Thank you! *Login to see link

[Daniel]

Daniel

#232034

Hey,

Thanks for your help with my other questions. Another quick question, how do you adjust the header to be full width and full height if using the Home Page Title option? It’s already full width, but its not full height. Thank you! *Login to see link

[Hannah]

Hannah

#232023

Hey,
Try adding this to your custom css box in Theme Options > Custom CSS:

.home #pageheader .container {
    background: rgba(155,155,155,.5);
    width: 100% !important;
    max-width: none;
}

If that doesn’t work please post a link.

Hannah

[Hannah]

Hannah

#231904

Try adding this to your custom css:

@media (min-width: 992px) {
.post-type-archive-product .page-description {
    display: none;
}
}

Hannah

[Hannah]

Hannah

#231839

Do you want it a separate image than that of your slider? Or are you just wanting your slider to go the full width of your page? If the latter, you can set your slider to full width from within the kadence slider settings.

Hannah

[Clayton]

Clayton

#231810

Hey Ben, thanks for adding that option! It is perfect. The only thing I’m bumping into now is that it seems like the width isn’t getting set without this line of css:

.kadence-info-box-image-inner-intrisic {
    min-width: 50px;
}

I have the max width for the media set to 50px but its almost as if it isn’t getting applied. I’m having this issue on .svg and .jpg image types. Let me know if you need any more information.

Screen Recording of Issue
URL of page: https://useevidence.com/features/

Thanks for the update guys. This option to vertical align top right in the block is amazing.

[Solace]

Solace

#231617

Hi Ben / team

Hope you are keeping well.

I have a question regarding using the Kadence slider pro – I am wanting to embed a youtube video on the home page at full size in the background and add a text layer / button on top.

I cannot provide a login for you to view as it’s being developed locally (I could provide screen shots if required)

The issue is as follows;

1) Youtube branding / watch later / share text – appears briefly. I understand it’s not possible to remove this, but what do you recommend would be the best way to hide it – for example, by enlarging the video viewport size, so that the top and bottom YouTube margins are hidden?

I tried adjusting .ytplayer-player-inline css but it appears the sizing of the video is dynamic…. (but not responsive) – which leads me to the next point….

2) The background YouTube video is not responsive.

Here are the settings I’m using in the slider;

Slider Grid Height: Full
Slider Grid Width: Full
Background position: center center (not sure if relevant)
Background repeat: no repeat (not sure if relevant)
Background size: cover (not sure if relevant)
Video Ratio: 16/9 (have tried all ratios but 16/9 appears best on all screen sizes, except for the above points made)

If you can’t help with Virtue suggestions – perhaps you’ll know of an alternative slider that could achieve it?

Greetings
Solace

[Solace]

Solace

#231617

Hi Ben / team

Hope you are keeping well.

I have a question regarding using the Kadence slider pro – I am wanting to embed a youtube video on the home page at full size in the background and add a text layer / button on top.

I cannot provide a login for you to view as it’s being developed locally (I could provide screen shots if required)

The issue is as follows;

1) Youtube branding / watch later / share text – appears briefly. I understand it’s not possible to remove this, but what do you recommend would be the best way to hide it – for example, by enlarging the video viewport size, so that the top and bottom YouTube margins are hidden?

I tried adjusting .ytplayer-player-inline css but it appears the sizing of the video is dynamic…. (but not responsive) – which leads me to the next point….

2) The background YouTube video is not responsive.

Here are the settings I’m using in the slider;

Slider Grid Height: Full
Slider Grid Width: Full
Background position: center center (not sure if relevant)
Background repeat: no repeat (not sure if relevant)
Background size: cover (not sure if relevant)
Video Ratio: 16/9 (have tried all ratios but 16/9 appears best on all screen sizes, except for the above points made)

If you can’t help with Virtue suggestions – perhaps you’ll know of an alternative slider that could achieve it?

Greetings
Solace

[Ben Ritner]

Ben Ritner

#231560

Hey,
Lets say by default you want all 4 column rows to become 2 columns on a tablet, pagebuilder does let you do this it just doesn’t add extra controls to make it more unique.

In your settings > page builder. Click layout tab. Then make sure Use Tablet Layout is checked.

Next scroll down to “Mobile Width” and there set the number to 767.

Try that, in most cases that will create the effect you want.

Ben

[Cindy]

Cindy

#231484

I am trying to add a video that will be fully responsive with Virtue Premium and Page Builder.

I have tried to add a video using other plugins, html code, and just the video url, and it fully responsive – the video does not stay contained in the Page Builder container and is cut off on cell phones. An example of this is *Login to see link This is using the following code:<p style=”text-align: center;”> <iframe src=”*Login to see link width=”900″ height=”506″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></p>. I would like to start with 900×506 size but be responsive and restricted to the container.

On a separate attempt, I tried using the video widget that comes with the Virtue Premium bundle. This is fully responsive, however the thumbnail uploaded to YouTube has a very poor resolution on the website and the “Share” and “Watch Later” icons at the top of the video do not work properly. I’m okay with suppressing the top line on the video display, but need the thumbnail uploaded to YouTube to come across with a higher resolution. Here is the link to the video: *Login to see link The image I uploaded to youtube for the thumbnail is 12809×720. Here is the page where I’m trying to add the video using the video widget.

I don’t really care what I use. Can you just tell me the best way to add a video to a site using Virtue Premium and Site Builder? I just need to have it fully responsive and look nice. Thank you for any help you can provide.

[Cindy]

Cindy

#231484

I am trying to add a video that will be fully responsive with Virtue Premium and Page Builder.

I have tried to add a video using other plugins, html code, and just the video url, and it fully responsive – the video does not stay contained in the Page Builder container and is cut off on cell phones. An example of this is *Login to see link This is using the following code:<p style=”text-align: center;”> <iframe src=”*Login to see link width=”900″ height=”506″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></p>. I would like to start with 900×506 size but be responsive and restricted to the container.

On a separate attempt, I tried using the video widget that comes with the Virtue Premium bundle. This is fully responsive, however the thumbnail uploaded to YouTube has a very poor resolution on the website and the “Share” and “Watch Later” icons at the top of the video do not work properly. I’m okay with suppressing the top line on the video display, but need the thumbnail uploaded to YouTube to come across with a higher resolution. Here is the link to the video: *Login to see link The image I uploaded to youtube for the thumbnail is 12809×720. Here is the page where I’m trying to add the video using the video widget.

I don’t really care what I use. Can you just tell me the best way to add a video to a site using Virtue Premium and Site Builder? I just need to have it fully responsive and look nice. Thank you for any help you can provide.

[Magdalena]

Magdalena

#231433

Hi, I am tryin got change header widget position on my page (see attached screen shot) I would like it on the right side aligned with the container width. Another think I would like to do as make footer widget layout made of 5 columns instead of 4. Is this possible please?

[Magdalena]

Magdalena

#231433

Hi, I am tryin got change header widget position on my page (see attached screen shot) I would like it on the right side aligned with the container width. Another think I would like to do as make footer widget layout made of 5 columns instead of 4. Is this possible please?

[Ben Ritner]

Ben Ritner

#231092

You seem to be adding this css:

@media (min-width: 992px) {
aside#ktsidebar {
    width: 20%;
    padding-right: 10px;
}
}

Which is not correct, if you want to change the width of your sidebar then you have to change both the sidebar and the content.

@media (min-width: 992px) {
aside#ktsidebar {
    width: 20%;
    padding-right: 10px;
}
.main.kt-sidebar {
    width: 80%;
}
}

Please note that you sidebar content is much less than 20% of page width so there is still going to be a larger gap between that and the content simply because the text in your sidebar is short.

Ben

[Mark]

Mark

#231087

So sorry to revive this post…

The code for archives is shrinking the content to the correct width but it is centered instead of offset to the left similar to the other pages/posts. Interestingly, it is offset to the left without a sidebar.

.postlist .kt_archivecontent, .wp-pagenavi {
max-width: 640px;
}

For example – https://digitalflightwire.com/category/prepar3d/

Any advice would be greatly appreciated!

Thank you so much once again!

Mark

[Ben Ritner]

Ben Ritner

#231062

Single post:

.single-post .main article.post, .single-post .main .comments-area {
    max-width: 640px;
}

archive:

.postlist .kt_archivecontent, .wp-pagenavi {
    max-width: 640px;
}

search:

.search-archive {
    max-width: 640px;
}

[Ben Ritner]

Ben Ritner

#231049

I’m not following, I don’t see a sidebar added on the left of your single blog posts?

On the page you linked to update your css to this:

.postlist .kt_archivecontent {
    max-width: 640px;
}

for single post:

.single-post .main article.post {
    max-width: 640px;
}

Ben

[Mark]

Mark

#231006

Hello again!

I’m trying to offset my post list and individual blog posts to the left. The width of the site will be 1216PX and I would like the content for those pages aligned left beside the left sidebar and approximately 640PX in width.

I’ve inputted the below CSS which sort of works.

.postlist .post {
padding-right: 357px;
}
.single-post div#ktmain {
padding-right: 357px;
}

The problem is before collapsing to tablet view it gets very small when shrinking the browser. Is there any way to maintain the width before collapsing to other views?

The site is digitalflightwire.com

Thank you so much, I apologize for the possible multiple questions today, I am trying to make some big changes to the site.

Cheers,

Mark

[Mark]

Mark

#231006

Hello again!

I’m trying to offset my post list and individual blog posts to the left. The width of the site will be 1216PX and I would like the content for those pages aligned left beside the left sidebar and approximately 640PX in width.

I’ve inputted the below CSS which sort of works.

.postlist .post {
padding-right: 357px;
}
.single-post div#ktmain {
padding-right: 357px;
}

The problem is before collapsing to tablet view it gets very small when shrinking the browser. Is there any way to maintain the width before collapsing to other views?

The site is digitalflightwire.com

Thank you so much, I apologize for the possible multiple questions today, I am trying to make some big changes to the site.

Cheers,

Mark

[northcoastleatherworks]

northcoastleatherworks

#230990

1. Logo used to begin below phone number on left in topbar. Go to *Login to see link and page down to North Coast Leather Works LLC – Motorcycle, Cowboy, Dress Hand Made Boot Belts to see screen print. You can see the logo placement there.

2. Suddenly, the logo appears to the right of the placement above:

*Login to see link

Want to make header appear as in #1.

I did not change the formatting between # 1 and #2.

Can you help?

Thanks,

Jerry

[northcoastleatherworks]

northcoastleatherworks

#230990

1. Logo used to begin below phone number on left in topbar. Go to *Login to see link and page down to North Coast Leather Works LLC – Motorcycle, Cowboy, Dress Hand Made Boot Belts to see screen print. You can see the logo placement there.

2. Suddenly, the logo appears to the right of the placement above:

*Login to see link

Want to make header appear as in #1.

I did not change the formatting between # 1 and #2.

Can you help?

Thanks,

Jerry

[Mark]

Mark

#230969

Hello!

I’m trying to reduce the width of the sidebar as well as spacing between the sidebar and content.

If it matters, I’ve already inputted the below CSS to hide the sidebar in mobile and tablet views.

@media (max-width: 992px) {
aside#ktsidebar {
display: none;
}
}

The test page(s) is *Login to see link although this will be applicable to all other pages with a sidebar. Please note, the page width will be increased when fully implemented.

Thank you so much, you guys are the best!

Mark

[Mark]

Mark

#230969

Hello!

I’m trying to reduce the width of the sidebar as well as spacing between the sidebar and content.

If it matters, I’ve already inputted the below CSS to hide the sidebar in mobile and tablet views.

@media (max-width: 992px) {
aside#ktsidebar {
display: none;
}
}

The test page(s) is *Login to see link although this will be applicable to all other pages with a sidebar. Please note, the page width will be increased when fully implemented.

Thank you so much, you guys are the best!

Mark

[Mark]

Mark

#230831

This reply has been marked as private.