Search Results for 'page width'

[marc joseph]

marc joseph

#250464

Hi ben and Hanna
My home page *Login to see link take no more in count the ccs code in Option theme advanced css … :

/* FOR HOME PAGE 3 buttonslanguage choice No menu and no footer . The following code suppress the display of menu and footer only on mainhome landing template page */
home #kad-banner, .home #containerfooter {
display: none;
}

best Marc

/*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);
}

/* epaisseur 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;
}

/* rend transparent le backgrounddesarea de saisie de texte ds contact page */
#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);
}

/* change la couleurdu texte du bouton submit 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;
}

/* 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;
}
}
/* to hide the right top bar widget on mobil only under a resolution */

@media (max-width: 768px) {
.topbar-widget {
display: none;
}
}
/* to suppress empty space before 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;
}
}

/* margin top et bas du H5 titre du portfolio sous le logo */
h5 {
margin-top: 0;
margin-bottom: 0;
}

/* supprimer espacement avant la top bar en haut
#topbar {
margin-top: -20px;
} */

/* Espacement vertical dans le texte paragraphe de PAGE BIO à 30px dans le css de la page */

/* CODE POUR MOBIL REDUIRE LE FILTER PROJECT SUR MOBILE */
#filters li {
float: left !important;
margin-left: 15px !important;
margin-bottom: 10px !important;
}
#filters {
height: auto !important;
}
.filter-trigger {
display: none;
}

[marc joseph]

marc joseph

#250464

Hi ben and Hanna
My home page *Login to see link take no more in count the ccs code in Option theme advanced css … :

/* FOR HOME PAGE 3 buttonslanguage choice No menu and no footer . The following code suppress the display of menu and footer only on mainhome landing template page */
home #kad-banner, .home #containerfooter {
display: none;
}

best Marc

/*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);
}

/* epaisseur 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;
}

/* rend transparent le backgrounddesarea de saisie de texte ds contact page */
#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);
}

/* change la couleurdu texte du bouton submit 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;
}

/* 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;
}
}
/* to hide the right top bar widget on mobil only under a resolution */

@media (max-width: 768px) {
.topbar-widget {
display: none;
}
}
/* to suppress empty space before 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;
}
}

/* margin top et bas du H5 titre du portfolio sous le logo */
h5 {
margin-top: 0;
margin-bottom: 0;
}

/* supprimer espacement avant la top bar en haut
#topbar {
margin-top: -20px;
} */

/* Espacement vertical dans le texte paragraphe de PAGE BIO à 30px dans le css de la page */

/* CODE POUR MOBIL REDUIRE LE FILTER PROJECT SUR MOBILE */
#filters li {
float: left !important;
margin-left: 15px !important;
margin-bottom: 10px !important;
}
#filters {
height: auto !important;
}
.filter-trigger {
display: none;
}

[Aurelio José Pons Puig]

Aurelio José Pons Puig

#250336

Hi we are trying to create a WCAG 2.0 AA level accesible page. By the moment we got it in a simple page with title an text, but there are problems when using some Kadence Blocks. We have tested all blocks an the feeling is good, a lot of blocks validate ok, but we found some problems in some other.

I will try to explain:

a) Advanced Gallery: have problems with <figcaption> tags, they are links but not well formed HTML code.

b) Modal dialog, has problem with an svg object, some attributes are not correct, for example when you write <svg strokewidth=”… the correct attribute according w3c is stroke-with. There are various like this.

c) Port and Portfolio grids, have some problems when you insert a <style> object inside HTML

d) Forms have some problems of HTML5, like using type attribute in a textarea object, and some other of accessibility, in the labeling of fields. We use *Login to see link to validate.

Those are the main errors we found, we are at your disposal to help you validate it if necessary

Thank you very much

[Aurelio José Pons Puig]

Aurelio José Pons Puig

#250336

Hi we are trying to create a WCAG 2.0 AA level accesible page. By the moment we got it in a simple page with title an text, but there are problems when using some Kadence Blocks. We have tested all blocks an the feeling is good, a lot of blocks validate ok, but we found some problems in some other.

I will try to explain:

a) Advanced Gallery: have problems with <figcaption> tags, they are links but not well formed HTML code.

b) Modal dialog, has problem with an svg object, some attributes are not correct, for example when you write <svg strokewidth=”… the correct attribute according w3c is stroke-with. There are various like this.

c) Port and Portfolio grids, have some problems when you insert a <style> object inside HTML

d) Forms have some problems of HTML5, like using type attribute in a textarea object, and some other of accessibility, in the labeling of fields. We use *Login to see link to validate.

Those are the main errors we found, we are at your disposal to help you validate it if necessary

Thank you very much

[Hannah]

Hannah

#250312

Hey John,
I’m not sure why the update would have affected this.
1. Try adding this to your css:

.siteorigin-panels-stretch.kt-parallax-stellar.kt-panel-row-stretch.panel-widget-style.panel-row-style.panel-row-style-for-229-0 {
    background-repeat: no-repeat;
}

2. In your page builder row is the Row Layout set to Full Width Stretched?

Hannah

[John]

John

#250286

Hello,

Would you mind taking a look at my home page? http://www.johngrahamtours.com. (I thought I made this request earlier, but can’t find my post in the forums, or a response, so I think it must not have sent. In the off chance that you have already seen this support request, my deep apologies for the repeat message).

After updating the Virtue theme, a couple of things went haywire:

1. the main parallax image is duplicating vertically on the home page. On mobile phones, it is duplicating three times.

2. The parallax image is not filling the entire screen horizontally, as it used to. It seems to be limited to a certain percentage of the screen width.

Everything else seems to be working as before.

Best,
John Graham

[John]

John

#250286

Hello,

Would you mind taking a look at my home page? http://www.johngrahamtours.com. (I thought I made this request earlier, but can’t find my post in the forums, or a response, so I think it must not have sent. In the off chance that you have already seen this support request, my deep apologies for the repeat message).

After updating the Virtue theme, a couple of things went haywire:

1. the main parallax image is duplicating vertically on the home page. On mobile phones, it is duplicating three times.

2. The parallax image is not filling the entire screen horizontally, as it used to. It seems to be limited to a certain percentage of the screen width.

Everything else seems to be working as before.

Best,
John Graham

[James]

James

#250266

Hi guys…

1. How can I make the search box 100% width.. Please see on mobile it’s not full width and same on desktop even if I set the width of the container to 100%. I am using elementor.

I tried this code without success:

@media screen and (max-width: 400px) {
.form-search {
width: 100% important;
}
}

@media screen and (min-width: 401px) and (max-width: 720px) {
.form-search {
max-width: 100% important;
}
}

@media screen and (min-width: 720px) {
.form-search {
max-width: 100% important;
}
}

2. Is there a shortcode for the virtue minicart as the elementor one doesn’t display the checkout buttons properly when a good amount of products are added on mobile devices… or am I better off on Mobiles just sending them straight to the cart page?

3. On mobile at checkout the continue shopping button is obscured.. how can I fix plz?

4. How can I make the field boxes slightly more grey a little like the mobile snapshot which was when I enabled the Hello theme… It just helps to make the checkout pop out more instead of all white background or almost white etc?

Many thanks
Anthony

[James]

James

#250266

Hi guys…

1. How can I make the search box 100% width.. Please see on mobile it’s not full width and same on desktop even if I set the width of the container to 100%. I am using elementor.

I tried this code without success:

@media screen and (max-width: 400px) {
.form-search {
width: 100% important;
}
}

@media screen and (min-width: 401px) and (max-width: 720px) {
.form-search {
max-width: 100% important;
}
}

@media screen and (min-width: 720px) {
.form-search {
max-width: 100% important;
}
}

2. Is there a shortcode for the virtue minicart as the elementor one doesn’t display the checkout buttons properly when a good amount of products are added on mobile devices… or am I better off on Mobiles just sending them straight to the cart page?

3. On mobile at checkout the continue shopping button is obscured.. how can I fix plz?

4. How can I make the field boxes slightly more grey a little like the mobile snapshot which was when I enabled the Hello theme… It just helps to make the checkout pop out more instead of all white background or almost white etc?

Many thanks
Anthony

[Ben Ritner]

Ben Ritner

#250148

Hey,
When using elementor set your page to full width in the page settings rather than forcing the width full in the page content in the elementor settings because that happens really late and for some things like masonry the width is checked for the container on load.

I set this up for you so you can see.

Ben

[Arindam]

Arindam

#250076

This reply has been marked as private.

[robbie1]

robbie1

#250071

Hey Ben

#1 Updated to the latest version of Kadence and my shop page product filter plugin shortcode is being now stripped out, it was visible in the previous version? Pics attached.

Just updated to 0.7.1 and now woocommerce product categories aren’t visible on the shop page either now. If you list by product its fine.
*Login to see link

#2 Placeholder text in the search window is now visible – great – BUT how do you adjust the the width of text area so the copy doesn’t return and make window really deep. see pic

#3 I’ve got a conflict / odd behaviour in the WP admin top bar. The Customise button has disappeared. This happened before the Theme update, also scroll animations aren’t working properly when I’m logged in to WP-Admin. This happened after a plug-in updates earlier this week, will do some investigation.

[robbie1]

robbie1

#250071

Hey Ben

#1 Updated to the latest version of Kadence and my shop page product filter plugin shortcode is being now stripped out, it was visible in the previous version? Pics attached.

Just updated to 0.7.1 and now woocommerce product categories aren’t visible on the shop page either now. If you list by product its fine.
*Login to see link

#2 Placeholder text in the search window is now visible – great – BUT how do you adjust the the width of text area so the copy doesn’t return and make window really deep. see pic

#3 I’ve got a conflict / odd behaviour in the WP admin top bar. The Customise button has disappeared. This happened before the Theme update, also scroll animations aren’t working properly when I’m logged in to WP-Admin. This happened after a plug-in updates earlier this week, will do some investigation.

[David Porter]

David Porter

#249799

Hi there,
I have a full width row on a page that was previously created with a new Block Editor plugin from the GeneratePress theme folk called Generate Blocks.
As soon as I add Kadence (with pro), it breaks that row.
It is a development site, so no serious issue (recreating a home page for a client), but would like to work out why.
So the theme is GeneratePress.
All I can do is show you an screen shot of what it looks like after the Kadence plugins are installed.
The block you see becomes very narrow only taking up about half the editing screen centered.
Interestingly, if I disable the Kadence plugins and install GetWid another blocks addon all is fine!
I can supply admin login if you want to take a peek?

TIA, Dave

[David Porter]

David Porter

#249799

Hi there,
I have a full width row on a page that was previously created with a new Block Editor plugin from the GeneratePress theme folk called Generate Blocks.
As soon as I add Kadence (with pro), it breaks that row.
It is a development site, so no serious issue (recreating a home page for a client), but would like to work out why.
So the theme is GeneratePress.
All I can do is show you an screen shot of what it looks like after the Kadence plugins are installed.
The block you see becomes very narrow only taking up about half the editing screen centered.
Interestingly, if I disable the Kadence plugins and install GetWid another blocks addon all is fine!
I can supply admin login if you want to take a peek?

TIA, Dave

[Hannah]

Hannah

#249694

I don’t believe there’s a functionality in Ascend to remove the sidebar from only the shop page and not all the shop archive pages. A workaround would be to create a full-width page then add your products via shortcode like this: [products limit="24" columns="4"] Is that something that would work for you?

Hannah

[phil2]

phil2

#249363

Thanks Haannah,

I was curious which plugin would cause that.

I can see virtue.css setting the correct width:

html.js.js-running body.home.page.logged-in.admin-bar.wp-embed-responsive.stickyheader.virtue-skin-default.boxed.customize-support div#wrapper.container {width: 1170px;}

But I also see this html which contradicts by fixing the width narrower:

<header id="kad-banner" class="banner headerclass kad-header-style-three kt-not-mobile-sticky" data-header-shrink="1" data-mobile-sticky="0" data-header-base-height="120" style="top: 32px; width: 1140px;">

Does that mean it is a theme setting that I have got wrong or could it be a plugin changing a theme setting?
Thanks,
Phil.

[Mike]

Mike

#249354

I’m using 7 (!) Ascend galleries with the slider option on the homepage of this site that’s under development, and eventually all will have different images. I have two questions.

First is a problem; I’ve specified a height and width of 244 and that’s what size the images are, but they’re only displaying at 214 x 214 or thereabouts.

I’ve inserted some CSS to removed the slickdots from these slide shows, but is there a way to removed the arrows?

Thanks!!

[Mike]

Mike

#249354

I’m using 7 (!) Ascend galleries with the slider option on the homepage of this site that’s under development, and eventually all will have different images. I have two questions.

First is a problem; I’ve specified a height and width of 244 and that’s what size the images are, but they’re only displaying at 214 x 214 or thereabouts.

I’ve inserted some CSS to removed the slickdots from these slide shows, but is there a way to removed the arrows?

Thanks!!

[jrnewell]

jrnewell

#249345

I added some CSS so that a gray bar appeared behind the Title text on Image Menu Items, however it’s not doing exactly what I want. I’d like the gray bar to disappear completely on hover (right now if you hover over the Image Menu Item, the Title bar stays visible unless you place your cursor directly over the Title). Here is a link to the Home Page where you can see an example of this: *Login to see link Also, I’d like the gray bar to match the width of the Title rather than the Subtitle (that way the gray bar doesn’t have extra space on either side of the Title even if the Subtitle is longer). This site is password protected, so I’ll provide the login credentials separately. Any help would be greatly appreciated!

Kindest regards,

Jennifer

[jrnewell]

jrnewell

#249345

I added some CSS so that a gray bar appeared behind the Title text on Image Menu Items, however it’s not doing exactly what I want. I’d like the gray bar to disappear completely on hover (right now if you hover over the Image Menu Item, the Title bar stays visible unless you place your cursor directly over the Title). Here is a link to the Home Page where you can see an example of this: *Login to see link Also, I’d like the gray bar to match the width of the Title rather than the Subtitle (that way the gray bar doesn’t have extra space on either side of the Title even if the Subtitle is longer). This site is password protected, so I’ll provide the login credentials separately. Any help would be greatly appreciated!

Kindest regards,

Jennifer

[Vu]

Vu

#249026

How can I make the woocommerce-info box comply with the width of the elementor checkout elements?

I don’t see an “element” for the woocommerce-info box in the list of elements available for elementor checkout page.

[Vu]

Vu

#249026

How can I make the woocommerce-info box comply with the width of the elementor checkout elements?

I don’t see an “element” for the woocommerce-info box in the list of elements available for elementor checkout page.

[Hannah]

Hannah

#248959

Unfortunately, yes. The banner is already taking up the full width of its container. If you want a full-width banner on a sidebar layout one option would be to create a row in page builder with a right column where you can add your widgets, giving it a sidebar effect. Then you can add a separate full-width row under that. Would that work for you?

Hannah

[Ben Andersen]

Ben Andersen

#248896

Steps to reproduce:
1. Set page layout to full width
2. Add a cover block to a page
3. Add a heading block or advanced heading block inside the cover block
4. Try to center align the header block
It works in the backend but not on the frontend!

[Ben Andersen]

Ben Andersen

#248896

Steps to reproduce:
1. Set page layout to full width
2. Add a cover block to a page
3. Add a heading block or advanced heading block inside the cover block
4. Try to center align the header block
It works in the backend but not on the frontend!

[Ben Ritner]

Ben Ritner

#248890

In your theme options > custom css add this css:

@media (max-width: 992px){
	.page #respond.comment-respond {
	    padding: 0 15px;
	}
}

Let me know if that works, I think this is a bug in the theme around comments on pages. That css should resolve it.

Ben

[John]

John

#248872

Hi Hannah,

Thanks for your prompt reply. I was able to adjust the height of the banner, but not the width. Is the width limited because I am using a sidebar? Please take a look and let me know: https://performanceplustennis.com/home-page-mock-up/

Thanks for your assistance!

John Craig
Performance Plus Tennis
http://www.performanceplustennis.com
949-278-7704

[John]

John

#248834

Hello Hannah,

I have a new front page, and a number of things are not cooperating. I wonder if you could help? Here is the page: *Login to see link

1. I have an image as a background to the Secondary menu. I would like to play with the height of this image. I tried to increase the height of the text line, but then this messed up the drop-down menu text spacing. So I need to work directly with that background image.

2. Could you help me make the Header and the Secondary Menu sticky? There is not an option within the theme to have a sticky header, and a secondary menu. I would like both to be disappear as a user scrolls down the page

3. This site employs a lot of “categories”. I don’t understand, can categories generate new pages? I hope so, as I would like a Category page to then list every item on the website that has been categorized with that rubric.

4. I would like a horizontal line to separate the footer widget areas from the footer menu.

5. The Virtue image gallery mosaic style doesn’t seem to be working, and I can’t figure out why.

6. At about 800 px wide, my home page menus disappear. How can I control when the menus collapse to the format for mobile phones? This should not happen until the width is more like 350px or 400px, no?

7. I want to control css for footer text, but can’t find where to do this. I want to have long lists in small font of all the categories, down in the footer area. I tried to put these categories in a unique footer menu. I found some supplementary css for the footer, but it doesn’t seem to work. Here is what I put in as supplementary css in the “advanced settings.”

.footercredits p {
font-size: 12px;
}

.footercredits p a {
color: #003a6d
}

.footermenu li a {
font-size: 12px;
font-weight: normal;
color: #003a6d
}

• This topic was modified 6 years ago by John.

[John]

John

#248834

Hello Hannah,

I have a new front page, and a number of things are not cooperating. I wonder if you could help? Here is the page: *Login to see link

1. I have an image as a background to the Secondary menu. I would like to play with the height of this image. I tried to increase the height of the text line, but then this messed up the drop-down menu text spacing. So I need to work directly with that background image.

2. Could you help me make the Header and the Secondary Menu sticky? There is not an option within the theme to have a sticky header, and a secondary menu. I would like both to be disappear as a user scrolls down the page

3. This site employs a lot of “categories”. I don’t understand, can categories generate new pages? I hope so, as I would like a Category page to then list every item on the website that has been categorized with that rubric.

4. I would like a horizontal line to separate the footer widget areas from the footer menu.

5. The Virtue image gallery mosaic style doesn’t seem to be working, and I can’t figure out why.

6. At about 800 px wide, my home page menus disappear. How can I control when the menus collapse to the format for mobile phones? This should not happen until the width is more like 350px or 400px, no?

7. I want to control css for footer text, but can’t find where to do this. I want to have long lists in small font of all the categories, down in the footer area. I tried to put these categories in a unique footer menu. I found some supplementary css for the footer, but it doesn’t seem to work. Here is what I put in as supplementary css in the “advanced settings.”

.footercredits p {
font-size: 12px;
}

.footercredits p a {
color: #003a6d
}

.footermenu li a {
font-size: 12px;
font-weight: normal;
color: #003a6d
}

• This topic was modified 6 years ago by John.

[phil2]

phil2

#248816

Thanks Ben,

Do you mean on the page options?

I removed the css and set the Feature page options to:
Max Image/Slider Height: 400
Max Image/Slider Width: 2000

The header image then displays at 1140 x 228.

I have left those settings in place and reinstated the css.

The header image now displays at full-width and 352px high.
Hope this helps.
Phil.