Search Results for 'page width'

[Hannah]

Hannah

#238170

Hi Ralf,
Try adding this to your custom css box in Theme Options > Advanced Settings:

@media (min-width: 768px) {
.page-bread-container {
    float: left;
    padding-top: 20px;
}
}

To create more space under your page title try increasing your line height for your h1 font from Theme Options > Typography.
Hope that’s helpful!

Hannah

[Marcel]

Marcel

#238044

Hello

When I add the Pinnacle Carousel as a widget and I set it up for any of the option whether it is images or products it doesn’t seem to display in the page.

Here is the link of the example: *Login to see link

You can see at the bottom of the post that only this code appears:
[carousel type=best-products items=6 orderby=menu_order columns=3 scroll=1 fullwidth=standard]

Please advise on what am I doing wrong.

Regards,

[Marcel]

Marcel

#238044

Hello

When I add the Pinnacle Carousel as a widget and I set it up for any of the option whether it is images or products it doesn’t seem to display in the page.

Here is the link of the example: *Login to see link

You can see at the bottom of the post that only this code appears:
[carousel type=best-products items=6 orderby=menu_order columns=3 scroll=1 fullwidth=standard]

Please advise on what am I doing wrong.

Regards,

[LOCALiQ]

LOCALiQ

#238024

On both Firefox and Safari the DOM reads as follows particularly the “width: 9px” which creates an image grid too narrow to be useful:
<div class=“tiles_item featured-project p_item jg-entry entry-visible” style=“width: 9px; height: 220px; top: 3px; left: 3px;”>

Chrome appears to handle this section fine with DOM as follows:
<div class="tiles_item featured-project p_item jg-entry entry-visible" style="width: 165px; height: 220px; top: 3px; left: 3px;">

At the moment I’m resolving this for the client by using the below code entered into the Custom CSS portion of Theme Options:
#portfolio_template_wrapper .featured-project .portfolio-item .tiles-item { min-width: 150px; }

[LOCALiQ]

LOCALiQ

#238024

On both Firefox and Safari the DOM reads as follows particularly the “width: 9px” which creates an image grid too narrow to be useful:
<div class=“tiles_item featured-project p_item jg-entry entry-visible” style=“width: 9px; height: 220px; top: 3px; left: 3px;”>

Chrome appears to handle this section fine with DOM as follows:
<div class="tiles_item featured-project p_item jg-entry entry-visible" style="width: 165px; height: 220px; top: 3px; left: 3px;">

At the moment I’m resolving this for the client by using the below code entered into the Custom CSS portion of Theme Options:
#portfolio_template_wrapper .featured-project .portfolio-item .tiles-item { min-width: 150px; }

[Ben Ritner]

Ben Ritner

#237960

Hey,
You can’t “page cache” the home page and use the mobile slider. Basically page caching makes a copy of the output as if viewed from a desktop. And then serves that output to every next visitor regardless of device. Meaning mobile is going to get the desktop version. Some caching plugins allow you to have a mobile and desktop version of cache which would work. Otherwise, you can load both sliders for everyone and hide one for some users and one of others based on screen size.

You seem to be using “WP Fastest Cache” which doens’t give options for a seperate mobile cache unless you have premium so you will need to load both sliders for everyone and show and hide based on screen size.

I went in and set that up, using the shortcode option for desktop and adding this into the shortcode input:

<div class="kt-desktop-slider">[kadence_slider_pro id="1"]</div><div class="kt-mobile-slider">[kadence_slider_pro id="2"]</div>

Then adding this css:

.kt-desktop-slider {display:block;}
.kt-mobile-slider {display:none;}
@media (max-width: 767px) {
    .kt-desktop-slider {display:none;}
    .kt-mobile-slider {display:block;}
}

Ben

[Ben Ritner]

Ben Ritner

#237928

Hey,
1. You can’t use the URL that arguments &feature=youtu.be so you just need to update to: https://www.youtube.com/watch?v=Zuy7zwVEAd0.

2. Can you provide an example of how you want this video carousel to work?

3. you can add css like this:

@media (max-width: 992px){
    .page-id-72428 #content > .row {
        display: flex;
        flex-direction: column-reverse;
    }
}

Ben

[Hannah]

Hannah

#237873

Hey,
1. You can remove the logo with this css:

div#logo {
    display: none;
}

2. I’m seeing this in your css:

.col-md-8, .span8 {
    width: 90%;
}

Are you adding that? That is pushing your sidebar down. If you want to remove the sidebar you can choose not to display it from your edit pages. For your homepage you can hide it from Theme Options > Home Layout.

Hope that’s helpful!

Hannah

[Jeremy]

Jeremy

#237772

Never mind. Apparently we had the Home Page Layout setting set to sidebar. In the previous version this was overidden by the setting of fullwidth for the template.

I have changed the setting in the Home Page Layout settings and it fixed the issue.

Thanks

Jeremy

[pdyoko]

pdyoko

#237685

Hi, All,

In short, I am using SliderPro on a page. Creating slide. Full width. Size 1140 x 489. Beautiful. 😉

Now I am taking Slide short code and placing in text widget on page. However, the image is not loading to the size that I created in SliderPro.

And here is where I have issues.

SiteOrigin Pagebuilder:

1. Insert row. Set attributes, layout, design for that row. I have tried everything combination…nothing allows the image to appear as 1140 x 489

Text Widget place in above established row. I do not set attributes, because Pagebuilder row is already controling that. Correct?

<gurrrrh>

Load page….image is cutoff at top and bottom.

Please help me to understand settings for these Pagebuilder rows and the widget settings. I could not find anything on this forum that helped me resolve this issue.

Thank you,
Pam

[pdyoko]

pdyoko

#237685

Hi, All,

In short, I am using SliderPro on a page. Creating slide. Full width. Size 1140 x 489. Beautiful. 😉

Now I am taking Slide short code and placing in text widget on page. However, the image is not loading to the size that I created in SliderPro.

And here is where I have issues.

SiteOrigin Pagebuilder:

1. Insert row. Set attributes, layout, design for that row. I have tried everything combination…nothing allows the image to appear as 1140 x 489

Text Widget place in above established row. I do not set attributes, because Pagebuilder row is already controling that. Correct?

<gurrrrh>

Load page….image is cutoff at top and bottom.

Please help me to understand settings for these Pagebuilder rows and the widget settings. I could not find anything on this forum that helped me resolve this issue.

Thank you,
Pam

[Hannah]

Hannah

#237630

Hey,
Which editor are you using? If using the WordPress editor and kadence blocks you can create a full-width row using the row layout block and then add a background image to that row. Then you could add whatever block you wanted on top. If using a page builder plugin such as page builder by siteorigin you can create a single column full width stretched row and set a background image to that row.
Hope this is helpful! Let me know if you have questions regarding a specific editor.

Hannah

[pdyoko]

pdyoko

#237612

Hi, Gang.

I want to place a fullwidth image on the home page further down from the slide image above with a link to an article. I have tried the SiteOrigin Hero widget. A little wanky. I have tried the Call To Action Widget. Doesn’t give me what I’m looking for. I really want more of a SliderPro image with titles and button. But I know that I can only use SliderPro in one area of homepage.

Any suggestions?

Thank you,
Pam

[pdyoko]

pdyoko

#237612

Hi, Gang.

I want to place a fullwidth image on the home page further down from the slide image above with a link to an article. I have tried the SiteOrigin Hero widget. A little wanky. I have tried the Call To Action Widget. Doesn’t give me what I’m looking for. I really want more of a SliderPro image with titles and button. But I know that I can only use SliderPro in one area of homepage.

Any suggestions?

Thank you,
Pam

[Ben Ritner]

Ben Ritner

#237597

Hmm it’s the transition in.. I see:

Update to this:

@media (min-width: 992px) {
html, body, html body .animsition {
height: 100%;
}
html body #wrapper.container {
min-height: 100%;
position: relative;
padding-bottom: 107px !important;
}
#containerfooter {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
}

I see the top padding removed. What page are you referring too?
Ben

[andrea.juelich]

andrea.juelich

#237586

Hi,
I have a question regarding the image sizes for profucts. If I don’t use the theme’s image sizes but rather enter my own in the customizer settings, I am unsure what sizes should be chosen since image sizes will depend on screen size. For example: On desktop, my main product image on the product detail page will have a certain width, but on mobile it will be LARGER because image and product summary will be collapsed underneath each other, so the image actually now takes up more space then on desktop. the same applies to shop archive pages: On desktop, I might have 3 columns and each image might be let’s say 400px, but on cell phone there is only ONE column meaning each image will be larger then 400px. So what sies should be entered? Always the largest size a particular image can have?

[andrea.juelich]

andrea.juelich

#237586

Hi,
I have a question regarding the image sizes for profucts. If I don’t use the theme’s image sizes but rather enter my own in the customizer settings, I am unsure what sizes should be chosen since image sizes will depend on screen size. For example: On desktop, my main product image on the product detail page will have a certain width, but on mobile it will be LARGER because image and product summary will be collapsed underneath each other, so the image actually now takes up more space then on desktop. the same applies to shop archive pages: On desktop, I might have 3 columns and each image might be let’s say 400px, but on cell phone there is only ONE column meaning each image will be larger then 400px. So what sies should be entered? Always the largest size a particular image can have?

[Phil Illingworth]

Phil Illingworth

#237514

Hi, I have a couple of questions to do with page layout where I’m struggling to find a solution.

1 – Footer: I’d like the footer to stick to the bottom of the page where there is little content. I used this code from elsewhere in the forum but it doesn’t seem to work. Also on pages (such as the home page) where there is a larger image the footer is sticking to the image.

@media (min-width: 992px) {
html, body {
height: 100%;
}
html body.wide #wrapper.container {
min-height: 100%;
position: relative;
padding-bottom: 88px !important;
}
#containerfooter {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
}

2 – Content below header: I’d like the content (specifically images) to start immediately below the header, so that the spacing below the logo and menu is equal to that above. At the moment the content defaults to a lower position, although it will scroll to that point before it starts to disappear behind the header.

I’ll add a couple of links in a reply. Thank you!

[Phil Illingworth]

Phil Illingworth

#237514

Hi, I have a couple of questions to do with page layout where I’m struggling to find a solution.

1 – Footer: I’d like the footer to stick to the bottom of the page where there is little content. I used this code from elsewhere in the forum but it doesn’t seem to work. Also on pages (such as the home page) where there is a larger image the footer is sticking to the image.

@media (min-width: 992px) {
html, body {
height: 100%;
}
html body.wide #wrapper.container {
min-height: 100%;
position: relative;
padding-bottom: 88px !important;
}
#containerfooter {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
}

2 – Content below header: I’d like the content (specifically images) to start immediately below the header, so that the spacing below the logo and menu is equal to that above. At the moment the content defaults to a lower position, although it will scroll to that point before it starts to disappear behind the header.

I’ll add a couple of links in a reply. Thank you!

[Ben Ritner]

Ben Ritner

#237397

Hey,
I’m not sure what you are wanting to target on this post. a post doesn’t have the same page header area as a page.

Also anytime you reference an image you should use absolute URLs, so try this:

.postid-9144 .single-article article header{
background: url('https://socialwork.uky.edu/socialworkwp/wp-content/uploads/2019/07/downtown-wide-low-level-page.jpg');
width: 100%;
top: 0;
left: 0;
padding-top: 0px;
padding-bottom: 85px;
}

Ben

[Hannah]

Hannah

#237396

Hey COE,
So the issue isn’t your page id, but that your posts do not have page headers like pages do. Try using this css:

.postid-9144 .entry-content h1 {
background: url(/wp-content/uploads/2019/07/downtown-wide-low-level-page.jpg);
width: 100%;
top: 0;
left: 0;
position:absolute;
padding-top: 0px;
padding-bottom: 85px;
}

Does that work for you?

Hannah

[Phil Illingworth]

Phil Illingworth

#237383

I’m experiencing odd behaviour with image overlay. When I use an image with a straightforward image block it will centre in the window no problem. If I use the same image with Image overlay, it moves to the left. I have the ‘Align Centre’ icon selected but it makes no difference. If I select ‘Wide width’ it moves to the centre.

I’m using Ascend premium, no plug-ins other than Kadence, Siteorigin, classic editor and Wordfence. I’m new to Kadence and I’m finding it frustrating not being able to get past this. There’s nothing else on the page other than header and footer so I’m stumped. Any thoughts please?

[Phil Illingworth]

Phil Illingworth

#237383

I’m experiencing odd behaviour with image overlay. When I use an image with a straightforward image block it will centre in the window no problem. If I use the same image with Image overlay, it moves to the left. I have the ‘Align Centre’ icon selected but it makes no difference. If I select ‘Wide width’ it moves to the centre.

I’m using Ascend premium, no plug-ins other than Kadence, Siteorigin, classic editor and Wordfence. I’m new to Kadence and I’m finding it frustrating not being able to get past this. There’s nothing else on the page other than header and footer so I’m stumped. Any thoughts please?

[COE]

COE

#237380

I’m trying to put a background image on a POST, similar to what I have below on a PAGE:

/* Header Background on specific page, only */
.page-id-491 .page-header {
background: url(/wp-content/uploads/2019/07/downtown-wide-low-level-page.jpg);
width: 100%;
top: 0;
left: 0;
position:absolute;
padding-top: 0px;
padding-bottom: 85px;
}

I’m not sure exactly what I need, I’ve tried several variations, including substituting .postid-9144 for .page-id-491.

Thank you,

Jon

[COE]

COE

#237380

I’m trying to put a background image on a POST, similar to what I have below on a PAGE:

/* Header Background on specific page, only */
.page-id-491 .page-header {
background: url(/wp-content/uploads/2019/07/downtown-wide-low-level-page.jpg);
width: 100%;
top: 0;
left: 0;
position:absolute;
padding-top: 0px;
padding-bottom: 85px;
}

I’m not sure exactly what I need, I’ve tried several variations, including substituting .postid-9144 for .page-id-491.

Thank you,

Jon

[Hannah]

Hannah

#235600

Hi Jamie,
The product titles within the individual product pages pull from your h1 settings. If you want to adjust these only for mobile you can use this css:

@media (max-width: 768px) {
div.product .product_title {
    font-size: 20px;
}
}

For the add on description names do you mean your tab titles? You can adjust with this css:

@media (max-width: 768px) {
#content div.product .woocommerce-tabs h2 {
    font-size: 20px;
}
}

Hope that helps!

Hannah

[Bernat]

Bernat

#235397

This reply has been marked as private.

[Ben Ritner]

Ben Ritner

#235078

Hey,
On your page you had added this:

[kad_modal btntitle="Book Now" btncolor="#ffffff" title="Book " btncolor="#ffffff"]
<p style="text-align: center;"><iframe src="https://squareup.com/appointments/book/09d5ad6e-c690-4431-adc7-037aa79bb7ac/68QF29A4AJK5D/services" width="100%" height="500" frameborder="0" allowfullscreen="allowfullscreen" data-mce-fragment="1"><iframe>[/kad_modal]</p>[/kad_modal]</iframe></p>

And it should have been this:

[kad_modal btntitle="Book Now" btncolor="#ffffff" title="Book " btncolor="#ffffff"]
<p style="text-align: center;"><iframe src="https://squareup.com/appointments/book/09d5ad6e-c690-4431-adc7-037aa79bb7ac/68QF29A4AJK5D/services" width="100%" height="500" frameborder="0" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></p>[/kad_modal]

Once I updated the page seems to work