Search Results for 'page width'

[Hannah]

Hannah

#230830

Hi Mark,
Yes, you can do this with css. If you post a link and specify the widths you would like for each page I can help with this.

Hannah

[Mark]

Mark

#230809

Hello!

I was just wondering, is it theoretically possible to have different header widths using CSS, a wider one for the home page say and something more narrow for the blog and other pages?

Thank you in advance,

Mark

[Mark]

Mark

#230809

Hello!

I was just wondering, is it theoretically possible to have different header widths using CSS, a wider one for the home page say and something more narrow for the blog and other pages?

Thank you in advance,

Mark

[cecilialocati]

cecilialocati

#230554

Hello,

I just added the following CSS to make the content full width as I wanted my main menu to be full width.

}

.container {
width: 100%;
}

Problem is that:
the blog page (*Login to see link
post pages (*Login to see link
Woo commerce pages (*Login to see link
are all full widths as well. I would like to keep them contained but at the same time to have the main menu full width.
Can you please help?

Thanks a lot
Cecilia

[cecilialocati]

cecilialocati

#230554

Hello,

I just added the following CSS to make the content full width as I wanted my main menu to be full width.

}

.container {
width: 100%;
}

Problem is that:
the blog page (*Login to see link
post pages (*Login to see link
Woo commerce pages (*Login to see link
are all full widths as well. I would like to keep them contained but at the same time to have the main menu full width.
Can you please help?

Thanks a lot
Cecilia

[tracy2]

tracy2

#230545

Hi there,
I’m trying to set a full-width image header on the ‘about us’ page on an in-development client site. On the home page, I achieved this with the Kadence Slider Pro, with only one image. (With one slight issue, which I’ll describe below.)

On the ‘about us’ page, I tried to use a full-width image module, as mentioned in a thread I found on this support forum. However, there’s white padding above it, and whilst the source image is 1280px wide, it’s being displayed at 1109px wide. The site’s not live so I can’t show you, but I’m attaching two screen shots – one of the left-justified, constrained image, and one of the page source code behind that element, in case that’s enough to troubleshoot. (I’d like for there to be no white space between the top of the image and the secondary menu above it, as is the case with the Kader Slidence Pro homepage header; is that possible?)

Additionally, when I first load any page on the site (including but not limited to the homepage with the single-image Kadence Slider Pro), a gap often appears between the secondary menu and the page header, or between the secondary menu and the hero image on the homepage. It disappears on page refresh, when I use View Page Source, or recently by itself, after a second or two.

I’m attaching two screen shots for that too – you can see one with the white gap between the secondary menu and page header, and one without. (The gap disappeared by itself a second or two after the page first loaded.)

Thanks in advance!

[tracy2]

tracy2

#230545

Hi there,
I’m trying to set a full-width image header on the ‘about us’ page on an in-development client site. On the home page, I achieved this with the Kadence Slider Pro, with only one image. (With one slight issue, which I’ll describe below.)

On the ‘about us’ page, I tried to use a full-width image module, as mentioned in a thread I found on this support forum. However, there’s white padding above it, and whilst the source image is 1280px wide, it’s being displayed at 1109px wide. The site’s not live so I can’t show you, but I’m attaching two screen shots – one of the left-justified, constrained image, and one of the page source code behind that element, in case that’s enough to troubleshoot. (I’d like for there to be no white space between the top of the image and the secondary menu above it, as is the case with the Kader Slidence Pro homepage header; is that possible?)

Additionally, when I first load any page on the site (including but not limited to the homepage with the single-image Kadence Slider Pro), a gap often appears between the secondary menu and the page header, or between the secondary menu and the hero image on the homepage. It disappears on page refresh, when I use View Page Source, or recently by itself, after a second or two.

I’m attaching two screen shots for that too – you can see one with the white gap between the secondary menu and page header, and one without. (The gap disappeared by itself a second or two after the page first loaded.)

Thanks in advance!

[Hannah]

Hannah

#230080

This css would hide your sidebar from mobile:

@media (max-width: 992px) {
.post-type-archive.woocommerce aside#ktsidebar {
    display: none;
}
}

If you want to add content on top of your products on mobile simply add whatever content you want to your shop edit page. Then let me know when you’ve done this and I can provide css to hide it from desktop screens.

Hannah

[Smith]

Smith

#229889

Hello all,

I have two sets of pricing tables in this site, one with 3 columns and the other [kadence_pricing_table id=”2″] is only a single column. Well, it won’t let me center it, so I thought I would put it in a two column row and insert an image next to it, but that won’t work either as it squishes the table.

I found this code below, but this code also effects my 3-column table on another page as well. So, if I knew code I would state in the code to only affect pricing table 2, but I don’t, so can you give me the code for my single table to center in a column widget. Thanks! Here is the site: *Login to see link

ul.kpt-table-area > li {
float: none;
width: 100%;
}

[Smith]

Smith

#229889

Hello all,

I have two sets of pricing tables in this site, one with 3 columns and the other [kadence_pricing_table id=”2″] is only a single column. Well, it won’t let me center it, so I thought I would put it in a two column row and insert an image next to it, but that won’t work either as it squishes the table.

I found this code below, but this code also effects my 3-column table on another page as well. So, if I knew code I would state in the code to only affect pricing table 2, but I don’t, so can you give me the code for my single table to center in a column widget. Thanks! Here is the site: *Login to see link

ul.kpt-table-area > li {
float: none;
width: 100%;
}

[Ben Ritner]

Ben Ritner

#229787

Hey,
No I wasn’t in your site.

Looks like you really need to update your PHP version.

I must make this as clear as possible, virtue does not support a transparent header option. If you want this and you want it to work well you should use the ascend theme.

All I am providing is a hack and it’s not a good option if you plan to use on some pages and not others.

Because your logo doesn’t make sense on a transparent header (it should be switched out while transparent) I can’t emphasize this enough that you should not be trying this with virtue.

Finally, you are using sticky header and the site you linked to is not, this again means you should be using ascend not virtue if you want sticky and transparent support.

Here is the css hack for your home page:

.home.stickyheader #kad-banner {
    position: absolute;
    width: 100%;
    background: transparent;
    transition:background .3s ease;
}
.home.stickyheader .is-sticky #kad-banner { background: rgba(255,255,255,0.8);}

.home #kad-banner-sticky-wrapper {
    height: 0 !important;
}

Ben

[Ben Ritner]

Ben Ritner

#229687

you are forcing the topbar fixed, you just need to account for the admin bar in your css:

@media screen and (max-width: 782px) {
.admin-bar #topbar {
    top: 44px;
}
}

Just note that while the topbar size gets larger, it then stops being fixed as you get on smaller devices and so your topbar will be lower then the top of the page while logged in

Ben

[Ben Ritner]

Ben Ritner

#229392

1. You can use this css:

#nav-second ul.sf-menu>li>a {
    width: auto;
    padding: 10px;
}

#nav-second ul.sf-menu>li {
    width: auto;
    display: inline-block;
    float: none;
}

#nav-second ul.sf-menu>li>a.sf-with-ul {
    padding: 10px 20px 10px 10px;
}

#nav-second ul.sf-menu {
    text-align: center;
}

2. ^

3. The best thing is to have the plugin you are using for a mobile menu appear at 992px.

@media only screen and (max-width: 992px) {
#shiftnav-toggle-main, .shiftnav-toggle-mobile {
    display: block;
}
}

4. You can use this css:

#nav-second ul.sf-menu > li:last-child ul ul {
    right:100%;
    left:auto;
}
.kt-showsub-indicator #nav-second ul.sf-menu > li:last-child > ul a.sf-with-ul:after {
    position: absolute;
    left: 6px;
    transform: rotate(180deg);
}
.kt-showsub-indicator #nav-second ul.sf-menu > li:last-child > ul a.sf-with-ul {
    padding-left:25px
}

Although it’s not ideal to place a multi-level dropdown on the right of the page because it’s still awkward for users to navigate to the left.

Ben

[Hannah]

Hannah

#229236

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

.page_head_title.top-contain-title.entry-title {
    max-width: 400px;
    display: inline;
}

Hope that helps!

Hannah

[Hannah]

Hannah

#229118

Hey Mark,
You have an open media query in your css that is affecting this. Here:

@media (min-width: 992px) {
div#content, div#pageheader .container {
max-width: 670px !important;
}
.headerclass {
border-bottom:1px solid #dbdbdb;
}

You just need to add a closing bracket and you should be set!

Hannah

[vadimkrj]

vadimkrj

#228910

Dear friend! I know everything about how to set Slider pro for Pinnacle Theme, except one thing. How to set Slider Pro with the full width of the page? Like on the image below. I using the image with sizes 1350×350, but when I set it, it looks like on *Login to see link
And what sizes of pictures should I use for my slider? Thank you!

[vadimkrj]

vadimkrj

#228910

Dear friend! I know everything about how to set Slider pro for Pinnacle Theme, except one thing. How to set Slider Pro with the full width of the page? Like on the image below. I using the image with sizes 1350×350, but when I set it, it looks like on *Login to see link
And what sizes of pictures should I use for my slider? Thank you!

[Vincent Blondaux]

Vincent Blondaux

#228791

So, i go to :

Products > Woo Templates > Single Product Templates : Edit template > Edit with Elementor.

Here is the edition with Elementor :

And the render :

When i edit a template, i haven’t any options for the page.
When i edit a page, i have theses options (width, type of header, etc…)… but i think it’s normal.

But the problem is : where i can change the options for the (which ?) page using the template of a single product… 😀

(thanks for your help 😉 )

[Ben Ritner]

Ben Ritner

#228765

I think it might be the CDN the image output isn’t being cropped to size and I bet it’s because the CDN is throwing it off.

Add this css, I’ll look at updating that so the portfolio type images work with a cdn.

.page-id-1391 .portfolio_item .imghoverclass a {
    padding-bottom: 100%;
    height: 0;
    position: relative;
}

.page-id-1391 .portfolio_item .imghoverclass a img {
    position: absolute;
    -o-object-fit: cover;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    object-fit: cover;
    width: 100%;
    left: 0;
    top:0;
}

[Andrew]

Andrew

#228731

Hello there,

I have set up a Portfolio Category Grid page and it displays ALL categories, including sub-categories (child-types). I only want to display the higher level categories/ parent types on this page.

I have searched the forum archives and see that you can do this by posting the following code into a full-width default page template

[portfolio_types columns=”4″ items=”10″]

…but it doesn’t look the same – the photos are not the same size when I try this, even in the full-width page template. I want it to look exactly like the other portfolio grids. Here’s a link, so you can see what I mean (I only have one higher level category so far):

*Login to see link

Finally, when I click on the grid menu item on this page, I am directed to the portfolio type pages, but I want it to direct to custom portfolio grid pages (which have the filter for the subcategories/ sub types). Am I right in assuming the only/ best way to do this is by redirecting the url of the type pages?

Thank you.

Andrew.

[Andrew]

Andrew

#228731

Hello there,

I have set up a Portfolio Category Grid page and it displays ALL categories, including sub-categories (child-types). I only want to display the higher level categories/ parent types on this page.

I have searched the forum archives and see that you can do this by posting the following code into a full-width default page template

[portfolio_types columns=”4″ items=”10″]

…but it doesn’t look the same – the photos are not the same size when I try this, even in the full-width page template. I want it to look exactly like the other portfolio grids. Here’s a link, so you can see what I mean (I only have one higher level category so far):

*Login to see link

Finally, when I click on the grid menu item on this page, I am directed to the portfolio type pages, but I want it to direct to custom portfolio grid pages (which have the filter for the subcategories/ sub types). Am I right in assuming the only/ best way to do this is by redirecting the url of the type pages?

Thank you.

Andrew.

[Michael]

Michael

#228630

Hi,

is it possible to place a full-width header slider (in place of the page title header) on pages that are not the home page?

[Michael]

Michael

#228630

Hi,

is it possible to place a full-width header slider (in place of the page title header) on pages that are not the home page?

[mandy.sims]

mandy.sims

#228550

Good afternoon
I am using Ascend Premium on a site with multiple custom post types. The main blog setting is to use a right hand sidebar, but for this post type, I wish to use a full width template. I have created a child theme and taken a copy of single.php renamed as single-wpdmpro.php (tp match the cpt slug) and removed the
if ( ascend_display_sidebar() ) section.

The page is using the new single-wpdmpro.php template and no sidebar is showing, but the content column width is still the same as it was before. I am not sure exactly what is controlling the width, but I suspect that I need to replace the main content div statement
<div class="main <?php echo esc_attr( ascend_main_class() ); ?>" id="ktmain" role="main">

Can you please advise what classes I should use to make the content full width?

I am currently working on a local machine, so cannot post a url.

Thanks

Mandy

[mandy.sims]

mandy.sims

#228550

Good afternoon
I am using Ascend Premium on a site with multiple custom post types. The main blog setting is to use a right hand sidebar, but for this post type, I wish to use a full width template. I have created a child theme and taken a copy of single.php renamed as single-wpdmpro.php (tp match the cpt slug) and removed the
if ( ascend_display_sidebar() ) section.

The page is using the new single-wpdmpro.php template and no sidebar is showing, but the content column width is still the same as it was before. I am not sure exactly what is controlling the width, but I suspect that I need to replace the main content div statement
<div class="main <?php echo esc_attr( ascend_main_class() ); ?>" id="ktmain" role="main">

Can you please advise what classes I should use to make the content full width?

I am currently working on a local machine, so cannot post a url.

Thanks

Mandy

[Ben Ritner]

Ben Ritner

#228545

You can add a video in a full width row without using the slider just in the page content.

If you are wanting sound then you will have to turn off autplay.

Ben

[Hannah]

Hannah

#228520

Sorry, I gave you css for the cart page, not checkout. This should work:

div#order_review, form.checkout #customer_details {
    width: 100% !important;
}

Hannah

[Ben Ritner]

Ben Ritner

#228490

This reply has been marked as private.