Search Results for 'page width'

[info794]

info794

#248759

Hello, i’m developing this website: http://www.sofarco.malonewebdesign.net

In homepage i have the product carousel widget, but in the widget setting is missing the columns quantity for breakpoint 992-1200px.

The breakpoints infact, are only these: *Login to see link

Can you give me the right custom css to resolve? i want to show 4 columns and not 5 at this resolution.

For the products showing via shortcode, i have resolved with this CSS but doesnt work for product carousel widget:

@media (max-width: 544px) {
.kad_product {
width: 100%;

}
}

@media only screen and (min-width: 544px) and (max-width: 768px) {

.kad_product {
width: 50%;
}
}

@media only screen and (min-width: 768px) and (max-width: 992px) {

.kad_product {
width: 33%;
}
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

.kad_product {
width: 25%;
}
}

@media (min-width: 1200px) {
.kad_product {
width: 20%;

}
}

Thanks and best regards

[info794]

info794

#248759

Hello, i’m developing this website: http://www.sofarco.malonewebdesign.net

In homepage i have the product carousel widget, but in the widget setting is missing the columns quantity for breakpoint 992-1200px.

The breakpoints infact, are only these: *Login to see link

Can you give me the right custom css to resolve? i want to show 4 columns and not 5 at this resolution.

For the products showing via shortcode, i have resolved with this CSS but doesnt work for product carousel widget:

@media (max-width: 544px) {
.kad_product {
width: 100%;

}
}

@media only screen and (min-width: 544px) and (max-width: 768px) {

.kad_product {
width: 50%;
}
}

@media only screen and (min-width: 768px) and (max-width: 992px) {

.kad_product {
width: 33%;
}
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

.kad_product {
width: 25%;
}
}

@media (min-width: 1200px) {
.kad_product {
width: 20%;

}
}

Thanks and best regards

[John]

John

#248757

Hello,

I would like some kind of separator between sidebars and the main pages. I have this custom css in the “advanced settings” area, but it doesn’t seem to do anything. I have many different named sidebars, so I wonder if I have to be specific and name each sidebar for this custom css to take effect? None of my sidebars are named #sidebar.

#sidebar {
border-left: 1px solid #d6dcdc;
padding-right: 13px;
}

I would also like to play around with changing the color and width of this line, or perhaps adding a custom design like a “greek wave design” or some other weave pattern. Would this kind of separator be added as a repeating horizontal jpeg file, or what?

[John]

John

#248757

Hello,

I would like some kind of separator between sidebars and the main pages. I have this custom css in the “advanced settings” area, but it doesn’t seem to do anything. I have many different named sidebars, so I wonder if I have to be specific and name each sidebar for this custom css to take effect? None of my sidebars are named #sidebar.

#sidebar {
border-left: 1px solid #d6dcdc;
padding-right: 13px;
}

I would also like to play around with changing the color and width of this line, or perhaps adding a custom design like a “greek wave design” or some other weave pattern. Would this kind of separator be added as a repeating horizontal jpeg file, or what?

[marc joseph]

marc joseph

#248748

merci so much Hanna . I have tried to disable the plug in Full screen background , it does nothoing.

I can send to you all of the css added to the Advanced option theme.

a bit in disorder but maybe something will help .
the heroes content are not displayed under the @media (max-width: 768px)

list of css active :

/* Main home page with choice of languages Landing page do not display menu and footer on english version only page 3 langues */

.home #kad-banner, .home #containerfooter {
display:none;
}

/*STyle of the portfolios items … on a Portfolio page */
.portfolio_item .portfoliolink {
position: static;
border: 0px solid rgba(255,255,255,.5);
opacity: 1;
background: rgba(0,0,0,0);
border: 2px solid transparent;
}
.portfolio_item .piteminfo h5 {
margin: 0;
padding: 6px 0 6px 0;
color: #EEE;
}
.portfolio_item .piteminfo p {
color: #EEE;
}
.portfolio_item:hover .portfoliolink {
border: 2px solid rgba(255,255,255,1);
}

/* FILTER PROJECTS in PORTFOLIO PAGE police filter name du portfolio */
#filters li h5 {
color: #99a1a4;
font-weight:400;
}
/* color mouse over filter name on portfolio page */
#filters li h5:hover {
color: #fff;
}
/* pour mobile couleur du mot filter dans potolio page */
.filter-trigger {
color: #7593a0;
}
#filter-trigger:hover {
color: #fff;
}

/* CODE POUR MOBIL to reorganise the display style of FILTER PROJECT SUR MOBILE code to change the style of displaying the filter project in Portfolio Page – Hanna */
#filters li {
float: left !important;
margin-left: 15px !important;
margin-bottom: 10px !important;
}
#filters {
height: auto !important;
}
.filter-trigger {
display: none;
}

/* CONTACT PAGE rend transparent le background de area de saisie de texte ds */
#kad-feedback-new-post input.full, .contactform input.full, .wpcf7 input {
background-color: rgba(220,220,220, 0.7);
}
.wpcf7-form-control.wpcf7-textarea {
background-color: rgba(220,220,220, 0.7);
}

/* CONTACT PAGE change lthe color of submit’s text of bouton send dans contact */
.wpcf7 input.wpcf7-submit {
padding: 12px 18px;
font-size: 12px;
border: none;
display: inline-block;
color: #1b84e1;
background: #fff;
transition: background .6s ease-out;
-webkit-transition: background .6s ease-out;
-moz-transition: background .6s ease-out;
-o-transition: background .6s ease-out;
}

/* TO DISPLAY THE PAGE 3 LANGUAGES ON MOBIL 3 langues s’affiche sur Mobile */

@media (max-width: 780px) {
.so-widget-sow-hero-default-2da0f0801951 .sow-slider-base ul.sow-slider-images .sow-slider-image-wrapper {
height: auto !important;
}
}

/* RIGHT TOP BAR WIDGET to display on/off if Mobil or PC ( contient le F11) only */

@media (max-width: 768px) {
.topbar-widget {
display: none;
}
}
/* to suppress empty space before (top) content of home page */

@media (max-width: 768px) {
.sow-slider-base ul.sow-slider-images li.sow-slider-image .sow-slider-image-container .sow-slider-image-wrapper {
padding: 0;
}
}
/* espacement du texte dans page bio ; voir css style du module de la page a line-height à 27 px*/
——————————-
maybe it could help you .
marc

[marc joseph]

marc joseph

#248642

hi alls
I have put as someone of you told me to do .
/* pour que la page 3 langues s’affiche sur Mobile */

@media (max-width: 780px) {
.so-widget-sow-hero-default-2da0f0801951 .sow-slider-base ul.sow-slider-images .sow-slider-image-wrapper {
height: auto !important;
}
}
but nothing is displayed.. what could be the reason .. ?
see the probleme on *Login to see link

best tanks marc

[marc joseph]

marc joseph

#248642

hi alls
I have put as someone of you told me to do .
/* pour que la page 3 langues s’affiche sur Mobile */

@media (max-width: 780px) {
.so-widget-sow-hero-default-2da0f0801951 .sow-slider-base ul.sow-slider-images .sow-slider-image-wrapper {
height: auto !important;
}
}
but nothing is displayed.. what could be the reason .. ?
see the probleme on *Login to see link

best tanks marc

[Hannah]

Hannah

#248637

Hey,
You need to use an image that is a bit larger. Making your image full width but limiting the height will cause the image to appear distorted. You can add this css to see what I mean:

.pageheadfeature.container.feature_container, .pageheadfeature.container.feature_container img {
    max-height: 400px;
}

Using a larger image should fix this problem.

Hannah

[phil2]

phil2

#248580

Hi,

On this page, I have set the template to Feature-Sidebar and set a header-image. I have set the “Max Image/Slider Height to be 400.

In CSS I have set the width:100% to give a full-width image. But it now ignores the Max Image height.

Is there another way to keep it to 400px high?
Thanks,
Phil.

[phil2]

phil2

#248580

Hi,

On this page, I have set the template to Feature-Sidebar and set a header-image. I have set the “Max Image/Slider Height to be 400.

In CSS I have set the width:100% to give a full-width image. But it now ignores the Max Image height.

Is there another way to keep it to 400px high?
Thanks,
Phil.

[Chris]

Chris

#248526

Hello Hannah and Ben,

after 2 days working on updating our website, I am facing 2 issues, that I haven’t solved yet, so I’ve decided to ask here for help.

*Login to see link

1. I want to change my website to a complete fullwidth homepage.
The challenge I face is the header. I want to make it fullwidth with Logo, Menu and Social Icons (right now using topbar), and an thumbnail image to register to newsletter. Somehow like here

*Login to see link

Do I need to add a script in header and footer script section?

2. How do I write text and btton over the home slider, like in this example?

*Login to see link

I haven’t figure that out yet

————————————————————

I hope you can help me out with one or two of my issues. Thank you for this support forum. It was already quite helpful to me

[Chris]

Chris

#248526

Hello Hannah and Ben,

after 2 days working on updating our website, I am facing 2 issues, that I haven’t solved yet, so I’ve decided to ask here for help.

*Login to see link

1. I want to change my website to a complete fullwidth homepage.
The challenge I face is the header. I want to make it fullwidth with Logo, Menu and Social Icons (right now using topbar), and an thumbnail image to register to newsletter. Somehow like here

*Login to see link

Do I need to add a script in header and footer script section?

2. How do I write text and btton over the home slider, like in this example?

*Login to see link

I haven’t figure that out yet

————————————————————

I hope you can help me out with one or two of my issues. Thank you for this support forum. It was already quite helpful to me

[alice]

alice

#248433

I’m working on moving a website from a Genesis child to Ascend. The logo/tagline area needs to have a specific look, and I haven’t been able to get that. The page below goes to a demo page. In the top banner, you’ll see the logo/tagline area bordered in green and the logo itself bordered in red. I do that so I can see what’s going on while I’m working.

How can I get the logo to left align like the tagline is? I’ve put the custom css that I’ve been trying and failing with.

Many thanks for any help you can offer!

*Login to see link

.kt-header-position-above #logo a {
flex-direction: column !important;
content-align: left !important;
}
#logo {
padding-top: 10px !important;
width: 440px;
border: 1px solid #73AD21;
align-content: left !important;
}
#logo .ascend-logo {
content-align: left !important;
border: 1px solid #cc0000 !important;
}
#logo .kad-site-tagline {
max-width: 670px;
text-align: left !important;
}

[alice]

alice

#248433

I’m working on moving a website from a Genesis child to Ascend. The logo/tagline area needs to have a specific look, and I haven’t been able to get that. The page below goes to a demo page. In the top banner, you’ll see the logo/tagline area bordered in green and the logo itself bordered in red. I do that so I can see what’s going on while I’m working.

How can I get the logo to left align like the tagline is? I’ve put the custom css that I’ve been trying and failing with.

Many thanks for any help you can offer!

*Login to see link

.kt-header-position-above #logo a {
flex-direction: column !important;
content-align: left !important;
}
#logo {
padding-top: 10px !important;
width: 440px;
border: 1px solid #73AD21;
align-content: left !important;
}
#logo .ascend-logo {
content-align: left !important;
border: 1px solid #cc0000 !important;
}
#logo .kad-site-tagline {
max-width: 670px;
text-align: left !important;
}

[Hannah]

Hannah

#248374

3. Do you mean the homepage? Are your other pages working? What page do you have set as your front page from Settings > Reading? You should be able to disable WooCommerce without issue. And you are welcome to also turn it off from Theme Options > Theme Extensions.

4. Do you want this for all your text? Or just text within Kadence Sliders? Adding that to all your text sitewide would look like this:

h1, h2, h3, h4, h5, p {
    background: rgba(255, 255, 255, 0.62);
    border-radius: 6px;
    padding: 20px;
}

5. In. Theme Options > Home Slider set “Add arrow at the bottom of slider” to “On”.

2. Sorry, that’s my bad. Change out this portion of the css:

li.menu-item {
    width: 25% !important;
}

for this:

.kad-header-style-basic.kad-header-center-logo .kad-primary-nav ul.sf-menu>li {
    width: 25%;
}

Hannah

[Hannah]

Hannah

#248352

Hi Anita,
1. You can add a background overlay with this css:

.headerclass {
    background: rgba(255,255,255,.3);
}

2. Try adding this css:

@media (min-width: 992px) {
.container div#kad-shrinkheader {
    max-width: 1600px;
    width: 100%;
}
.kt-menu-left.col-md-4.col-sm-4.col-ss-2.kad-header-menu-left, .kt-menu-right.col-md-4.col-sm-4.col-ss-2.kad-header-right {
    width: 37%;
}
.col-md-4.col-sm-8.col-ss-10.clearfix.kad-header-left.kad-header-logo {
    width: 25%;
}
li.menu-item {
    width: 25% !important;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
.kad-header-style-basic.kad-header-center-logo .kad-primary-nav ul.sf-menu>li>a {
    font-size: 12px;
}
}

3. Which page? Have you disabled WooCommerce from Theme Options > Theme Extensions?

Hannah

[Anita]

Anita

#248301

Hello Support team!

My favourite is Ascend Premium theme, but this time I’m using Pinnacle, because of some visual features. And I wonder, if there is a good solution for the followings (as with Ascend I could easilly solve them):

1. How can I set the transparency rate of Transparent header?
2. I’d like to use header style with Center logo. But site layout width is not wide enough for the menu items (4 menus on the left and on the right). Can I make the site wider?
3. I’ve imported the basic theme demo content (*Login to see link however I don’t need Woocommerce. If I turn off WooC plugin, the whole page disappeares. Why?

Thanks for your help in advance,
BR,
Anita

[Anita]

Anita

#248301

Hello Support team!

My favourite is Ascend Premium theme, but this time I’m using Pinnacle, because of some visual features. And I wonder, if there is a good solution for the followings (as with Ascend I could easilly solve them):

1. How can I set the transparency rate of Transparent header?
2. I’d like to use header style with Center logo. But site layout width is not wide enough for the menu items (4 menus on the left and on the right). Can I make the site wider?
3. I’ve imported the basic theme demo content (*Login to see link however I don’t need Woocommerce. If I turn off WooC plugin, the whole page disappeares. Why?

Thanks for your help in advance,
BR,
Anita

[Ben Ritner]

Ben Ritner

#248287

Hey,
You can add css like this:

@media (min-width: 1102px) {
.site .content-container .alignwide.post-thumbnail {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
    clear: both;
}
}

Or you can set the page title to be “above” the content and then have the background pull from the featured image.

Ben

[Hannah]

Hannah

#248077

Hey Phil,
You can set a max-width for your images in your post edit page under Standard Post Options > Max Image/Slider Height.
Hope that helps!

Hannah

[phil2]

phil2

#248065

Hi,

I have a row with 3 columns each holding a “Simple Download Monitor” shortcode. You can see it on this page where the menus can be downloaded.
I need all 3 rows to be the same height to avoid the current “staggered” appearance for certain screenwidths.

Is there a way to keep the heights the same for all screen widths?

Many thanks,
Phil.

[phil2]

phil2

#248065

Hi,

I have a row with 3 columns each holding a “Simple Download Monitor” shortcode. You can see it on this page where the menus can be downloaded.
I need all 3 rows to be the same height to avoid the current “staggered” appearance for certain screenwidths.

Is there a way to keep the heights the same for all screen widths?

Many thanks,
Phil.

[phil2]

phil2

#248059

Hi,
I think we’ve done this one before but I couldn’t find the post!
I have a number of posts where the featured image is a square badge. This is necessary because the badges are used in a carousel and look great at the top of each page.

However when the badge appears as a header, it is automatically stretched to fill the width, and so it becomes far too high.
Is there a way to prevent the image being stretched? I tried setting the height and/or width but these just crop the image rather than scale it.

Thanks in advance,
Phil.

[phil2]

phil2

#248059

Hi,
I think we’ve done this one before but I couldn’t find the post!
I have a number of posts where the featured image is a square badge. This is necessary because the badges are used in a carousel and look great at the top of each page.

However when the badge appears as a header, it is automatically stretched to fill the width, and so it becomes far too high.
Is there a way to prevent the image being stretched? I tried setting the height and/or width but these just crop the image rather than scale it.

Thanks in advance,
Phil.

[Daniel Berdal]

Daniel Berdal

#248035

Pretty strange issue that is only occurring in one of my rows.

As the title describes, at the 782px breakpoint one of my rows suddenly jumps to 17895600px wide

… which is much to wide for editing on a small screen haha

adding the css

body.block-editor-page.kt-editor-width-default .wp-block {
max-width: 80vw;
}

appears to solve the issue, but I figured if it’s happened to me once it’ll probably happen to others or myself again in the future.
The published version of the page on the front end renders correctly.

This is on a development site so if you’d like me to add one of your support team to the site, I’d be happy to do that.

[Daniel Berdal]

Daniel Berdal

#248035

Pretty strange issue that is only occurring in one of my rows.

As the title describes, at the 782px breakpoint one of my rows suddenly jumps to 17895600px wide

… which is much to wide for editing on a small screen haha

adding the css

body.block-editor-page.kt-editor-width-default .wp-block {
max-width: 80vw;
}

appears to solve the issue, but I figured if it’s happened to me once it’ll probably happen to others or myself again in the future.
The published version of the page on the front end renders correctly.

This is on a development site so if you’d like me to add one of your support team to the site, I’d be happy to do that.

[Luis]

Luis

#247984

Hi Hanna,

The media settings won’t show up until you have added an embedded link. Have you tried this?
-yes, first thing I tried. The video shows but no settings.

The height of your video will be determined by the width. Have you tried setting a max-width?
well this is the thing, no matter what width I tell it, it is still showing the full height…..

I have a few examples now on that page if you want to look at it….

[Hannah]

Hannah

#247968

You can turn off the toggle by setting “Show toggle buttons for list/grid on shop page” to “Off” from Theme Options > Shop Archive Settings. Then to make the products display in a list in mobile you can add this to your custom css:

@media (max-width: 768px) {
.kad_product.col-xs-6 {
    width: 100%;
}
}

Hope that helps!

Hannah

[Michael]

Michael

#247911

Hi

could you show me how to add a page id target to this css snippet:

.flex-control-nav, .flex-direction-nav {
display:none;
}

I’m using this shortcode on the homepage:

[gallery columns="1" size="full" type="slider" width="1600" height="900" ids="152,153,154,155,157,158,160,161,54401,161,54401,161,54401,161,54401,54401,54401,54401,54401" link="file" caption="default" masonry="default" transpeed="0" speed=1000]

it works, but want to loose the nav arrows and dots

[Michael]

Michael

#247911

Hi

could you show me how to add a page id target to this css snippet:

.flex-control-nav, .flex-direction-nav {
display:none;
}

I’m using this shortcode on the homepage:

[gallery columns="1" size="full" type="slider" width="1600" height="900" ids="152,153,154,155,157,158,160,161,54401,161,54401,161,54401,161,54401,54401,54401,54401,54401" link="file" caption="default" masonry="default" transpeed="0" speed=1000]

it works, but want to loose the nav arrows and dots

[Mamy]

Mamy

#247883

Hi

Just bought Kadence Blocks Pro and started to build stuff. On my first page, I run into a few problems as some block layouts break on my site.

– I made a live demo of the problems here: *Login to see link
– Attached screenshots.
– Setting: WooCommerce 4.01, WordPress 5.4, Storefront-theme v. 2.5.5.
– Tested on Edge and Chrome on Win10 (and Twentytwenty-theme).

Problem 1: ROW LAYOUT BLOCK
This problem is seen on Tablet layout on Twentytwenty and Storefront themes.

Problem: when having 2-column row set to collapse to 1-column on tablet and mobile and collapse order set to right-to-left, the first column flows under the content below and above in tablet.

Problem 2: PRODUCT CAROUSEL BLOCK
This problem is seen on Desktop and Tablet layouts on Storefront theme. Works as intended in Twentytwenty and in Storefront mobile.

With the Storefront theme (and the child theme I’m using) the Product Carousel Block sets too tiny width to slides in desktop and this messes up the layout. The wrong width seems to be injected as inline CSS so I don’t know where the problem is.

Where could I begin to fix these? Are some of my block settings wrong? Is it theme/plugin conflict?

The Product carousel problems are more relevant, as I already use the block (and hide it on desktop). Thank you for your help.

[Mamy]

Mamy

#247883

Hi

Just bought Kadence Blocks Pro and started to build stuff. On my first page, I run into a few problems as some block layouts break on my site.

– I made a live demo of the problems here: *Login to see link
– Attached screenshots.
– Setting: WooCommerce 4.01, WordPress 5.4, Storefront-theme v. 2.5.5.
– Tested on Edge and Chrome on Win10 (and Twentytwenty-theme).

Problem 1: ROW LAYOUT BLOCK
This problem is seen on Tablet layout on Twentytwenty and Storefront themes.

Problem: when having 2-column row set to collapse to 1-column on tablet and mobile and collapse order set to right-to-left, the first column flows under the content below and above in tablet.

Problem 2: PRODUCT CAROUSEL BLOCK
This problem is seen on Desktop and Tablet layouts on Storefront theme. Works as intended in Twentytwenty and in Storefront mobile.

With the Storefront theme (and the child theme I’m using) the Product Carousel Block sets too tiny width to slides in desktop and this messes up the layout. The wrong width seems to be injected as inline CSS so I don’t know where the problem is.

Where could I begin to fix these? Are some of my block settings wrong? Is it theme/plugin conflict?

The Product carousel problems are more relevant, as I already use the block (and hide it on desktop). Thank you for your help.