Search Results for 'page width'

[adventuretravelcoach]

adventuretravelcoach

#242510

Hey Hannah,

I went into Kadence Blocks but it says the following:

Ben Ritner – Kadence WP
Donate to this plugin »
Warning: This plugin has not been tested with your current version of WordPress.

However in my dashboard it confirms that my plugins are all updated.

Last checked on December 28, 2019 at 2:50 pm. Check Again

You have the latest version of WordPress. Future security updates will be applied automatically.

Kadence Blocks – Gutenberg Page Builder Toolkit
Description Installation Changelog Screenshots Reviews
Version: 1.7.10
Author: Kadence WP
Last Updated: 4 days ago
Requires WordPress Version: 5.2 or higher
Compatible up to: 5.3.0
Active Installations: 50,000+
WordPress.org Plugin Page »
Plugin Homepage »
AVERAGE RATING

5.0 rating based on 49 ratings
(based on 49 ratings)

REVIEWS

Read all reviews on WordPress.org or write your own!

5 stars 48
4 stars 1
3 stars 0
2 stars 0
1 star 0
CONTRIBUTORS

Ben Ritner – Kadence WP
Donate to this plugin »
Warning: This plugin has not been tested with your current version of WordPress.
This plugin adds custom blocks and options to extend Gutenberg’s editing capabilities so you can create custom layouts and more engaging content. This plugin is meant to be a toolkit that makes the WordPress block editor capable of creating content usually only possible through popular page builder plugins. For example, with the Kadence Row Layout Block you can better control columns for different screen sizes plus it gives you full row editing tools like padding, backgrounds, overlays with gradients, vertical-align and much more.

Try Kadence Blocks

Demo Testing

Custom Blocks Include

Row Layout – demo
Advanced Gallery – demo
Form – demo
Advanced Heading – demo
Advanced Button – demo
Tabs – demo
Accordion – demo
Testimonials – demo
Icon – demo
Spacer / Divider – demo
Info Box – demo
Icon List – demo
Video Tutorial

Key Block Features

The Row Layout block can have 1-6 columns, and any other blocks can be nested inside. So as a single column block, it’s a robust wrapper because you can create very custom backgrounds and define padding, margin, and dividers both for desktop and mobile layouts.

The Advanced Gallery block allows you to add photo galleries in a masonry, grid, carousel, fluid width carousel or slider style. Enjoy four different optional caption locations, each with options to style font, background, etc. Within each gallery, you can define the thumbnail ratio, add an image filter, set a border radius, and add box shadows. You can make each image a custom link to another page or website. Or you can easily enable a built-in lightbox. Plus you can select which image size to use for your thumbnails, and lightbox image for ultimate performance.

The Advanced Heading block provides full control for your headings, including font family (all google fonts), font weight, font style, font size (with tablet and mobile options), line height, color, letter spacing, alignment, and margin. Plus you can define part of the heading as a highlight and style it uniquely.

The Advanced Button block allows you to have up to five buttons side by side. You can control each individually, both with static and hover styles, and each button can have an added icon next to the text. This block even supports video links that open in a popup all built in!

The Tabs block is highly customizable with unique tab title settings for spacing, color, icons, and text. You can set up vertical or horizontal tabs, plus there are options to switch to an accordion setup for mobile. Each tab content is an empty canvas able to contain any other block within it.

The Testimonial block has four built-in preset styles to choose from and allows you to add a carousel or grid of testimonials right into your page or post. You can then customize the colors, fonts, size, border, and shadow to your liking.

The Icon block enables you to add an SVG icon right into your page. There are over 1500 icons to choose from, and with each, you can control the size, color, background, border and add a link.

The Spacer / Divider block allows you to optionally show a divider inside an area with a drag-able height. The divider has style options allowing you to set the width, height, color, line style, and opacity.

The Info Box Block is a box link containing an icon or image and optionally a title, description and “learn more” text. Configure padding, fonts, backgrounds, borders, and style static and hover colors even show a box shadow.

Editor Max Width

One of the challenges with creating column and row layouts in Gutenberg is the width of the editor in your admin. By default, Gutenberg uses a 650px max width for the content editor. When adding text to a sidebar template, this works great, as the max width in the editor is comparable to the content width when using a sidebar. However, for content going into pages where you don’t have a sidebar, it is a poor representation of what you are going to get on the front end of your site. Not to mention, it makes for a cramped space to work in if you are trying to manage a row with three columns.

In an effort to create an easier way to use Gutenberg in a more “page building experience” we created a simple method that allows you to change the default max width for pages and posts, as well as individually through a page by page setting.

Source files

github

Support

We are happy to help as best we can with questions! Please use the support forums.

[adventuretravelcoach]

adventuretravelcoach

#242466

Hi Hannah,

I received notification from Google
Search Console has identified that your site is affected by 3 Mobile Usability issues:

Top Issues
The following issues were found on your site:

Text too small to read

Clickable elements too close together

Content wider than screen

I went into google to see if I can get info on how to fix it. I’ve read about web design viewpoint but don’t want to add code to head of site. How can I fix this please?

Another article suggested:
You should include the following <meta> viewport element in all your web pages:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

but I am not 100% sure where to add it?

thanks in advance.
Mimmie

• This topic was modified 6 years, 4 months ago by adventuretravelcoach.

[adventuretravelcoach]

adventuretravelcoach

#242466

Hi Hannah,

I received notification from Google
Search Console has identified that your site is affected by 3 Mobile Usability issues:

Top Issues
The following issues were found on your site:

Text too small to read

Clickable elements too close together

Content wider than screen

I went into google to see if I can get info on how to fix it. I’ve read about web design viewpoint but don’t want to add code to head of site. How can I fix this please?

Another article suggested:
You should include the following <meta> viewport element in all your web pages:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

but I am not 100% sure where to add it?

thanks in advance.
Mimmie

• This topic was modified 6 years, 4 months ago by adventuretravelcoach.

[Hannah]

Hannah

#242447

Hey,
I’m seeing this in your css:

@media (min-width: 1200px) {
.container {
    width: 970px;
}
}

Are you adding that? Are you wanting the content to be smaller on other pages, just not your homepage?

Hannah

[Tamerlan]

Tamerlan

#242444

Hi
In my website *Login to see link I want to increase width of latest posts and sidebar under carousel. How I can do this? Can you please help me

[Tamerlan]

Tamerlan

#242444

Hi
In my website *Login to see link I want to increase width of latest posts and sidebar under carousel. How I can do this? Can you please help me

[Asmus Wanke]

Asmus Wanke

#242166

Hi,

I am using the ascend premium theme and disabled all plugins except kadence related ones.
For testing purpose I have this page: *Login to see link
Same page without video popup: *Login to see link does not raise an error.

The full error message of Ryte is:
The <head> area appears to be malformed. This can be due to text or invalid tags in your <head>, or due to meta or link tags in your <body>.
One effect of this issue might be missing meta information.
This can cause misinterpretations (missing canonical for instance).
The W3C validator below might help you figure out the exact reason.

W3C validator raises just one error:
error From line 68, column 2159
to line 68, column 2162 CSS: max-width: only 0 can be a unit. You must put a unit after your number.
Code: max-width:1140}</sty
However, this error is related to ascend premium theme ( my setting ‘Site Layout Max-Width’ to ‘1140px’ ) and not the plugin. Looks like ‘px’ does not make it into the css?

I am lost with this one. Any suggestions from your side?

Regards,

Asmus

[Asmus Wanke]

Asmus Wanke

#242166

Hi,

I am using the ascend premium theme and disabled all plugins except kadence related ones.
For testing purpose I have this page: *Login to see link
Same page without video popup: *Login to see link does not raise an error.

The full error message of Ryte is:
The <head> area appears to be malformed. This can be due to text or invalid tags in your <head>, or due to meta or link tags in your <body>.
One effect of this issue might be missing meta information.
This can cause misinterpretations (missing canonical for instance).
The W3C validator below might help you figure out the exact reason.

W3C validator raises just one error:
error From line 68, column 2159
to line 68, column 2162 CSS: max-width: only 0 can be a unit. You must put a unit after your number.
Code: max-width:1140}</sty
However, this error is related to ascend premium theme ( my setting ‘Site Layout Max-Width’ to ‘1140px’ ) and not the plugin. Looks like ‘px’ does not make it into the css?

I am lost with this one. Any suggestions from your side?

Regards,

Asmus

[Hannah]

Hannah

#242115

Try using a larger image for your full-width homepage banner. Something like 2000x1600px.
This post may be helpful: https://www.kadencewp.com/blog/best-practices-for-images-sizes-and-optimization-in-wordpress/

Hannah

[admin112]

admin112

#242108

What is the suggested banner size for Full Width homepage slider and Full Width homepage mobile slider?

[admin112]

admin112

#242008

Hi Team,

Please see this website: http://www.wildlifeconservationtrust.org

You will notice there are 2 banners on the homepage.

Here is my challenge – Whenever I try to create full width banners (at either of the 2 banner spaces), the image appears stretched or distorted on larger screens. How do I ensure that the image quality is constant across all screen sizes? Please help.

BTW I have opted for a Boxed layout.

Thank you,
Yogi

[admin112]

admin112

#242008

Hi Team,

Please see this website: http://www.wildlifeconservationtrust.org

You will notice there are 2 banners on the homepage.

Here is my challenge – Whenever I try to create full width banners (at either of the 2 banner spaces), the image appears stretched or distorted on larger screens. How do I ensure that the image quality is constant across all screen sizes? Please help.

BTW I have opted for a Boxed layout.

Thank you,
Yogi

[Miguel]

Miguel

#241927

Hi Team,
I have categories pages on my site with product Archive Templates.
Those templates have a PageBuilder row set to Full Width Stretched Padded. It looks OK on my working 27″ inches screen but is too much padding for a laptop screen size.
Can I control the right and left padding for a particular row on different screen sizes?

Thanks!

[Miguel]

Miguel

#241927

Hi Team,
I have categories pages on my site with product Archive Templates.
Those templates have a PageBuilder row set to Full Width Stretched Padded. It looks OK on my working 27″ inches screen but is too much padding for a laptop screen size.
Can I control the right and left padding for a particular row on different screen sizes?

Thanks!

[John]

John

#241630

Here is a category page displaying sub-categories:
*Login to see link

I see a very different page width in different browsers. I would like to understand why Chrome looks so much different:

Chrome:
*Login to see link

Safari:
*Login to see link

Firefox:
*Login to see link

[John]

John

#241630

Here is a category page displaying sub-categories:
*Login to see link

I see a very different page width in different browsers. I would like to understand why Chrome looks so much different:

Chrome:
*Login to see link

Safari:
*Login to see link

Firefox:
*Login to see link

[Anonymous]

Anonymous

#241576

Hey Ben,

just installed a fresh WP 5.3 with Pinnacle.

1) However, I cannot change the page attributes to Full Width.
2) Where can I change the “$content_width” to 1400px
3) Can I change 1 row to full-width-stretch like I could with the PageBuilder from SiteOrigin?

http://www.yaoyaoforest.com

Best regards,
Hendrik

[Anonymous]

Anonymous

#241576

Hey Ben,

just installed a fresh WP 5.3 with Pinnacle.

1) However, I cannot change the page attributes to Full Width.
2) Where can I change the “$content_width” to 1400px
3) Can I change 1 row to full-width-stretch like I could with the PageBuilder from SiteOrigin?

http://www.yaoyaoforest.com

Best regards,
Hendrik

[Hannah]

Hannah

#241096

Hey Richard,
Which slider are you using? You can create a slider that goes fully across the page using the fullwidth slider or the Kadence slider.

Hannah

[Richard]

Richard

#241074

Right now, I have two issues:
1. How ho I move my phone number and Social Icons to the right side of my Home Page?

2. How do I get the Slider on the home page to fully go across the top of the page without changing the width of the picture?

• This topic was modified 6 years, 5 months ago by Richard.

[Richard]

Richard

#241074

Right now, I have two issues:
1. How ho I move my phone number and Social Icons to the right side of my Home Page?

2. How do I get the Slider on the home page to fully go across the top of the page without changing the width of the picture?

• This topic was modified 6 years, 5 months ago by Richard.

[Angelo Lazzari]

Angelo Lazzari

#241070

Hi, found it, it was the code to push the footer to the bottom of the page

/**********************************************************************
EMPUJAR EL FOOTER A FONDO PAGINA
**********************************************************************/
@media (min-width: 992px) {
html, body {
height: 100%;
}
html body #wrapper.container {
min-height: 100%;
position: relative;
padding-bottom: 88px !important;
}
#containerfooter {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
}

i deleted it…

hank you very much
Angelo

[Ben Ritner]

Ben Ritner

#240894

I’m now following.

Ok so when you use fullwidth=”true” the theme creates the fullwidth row for that shortcode. Since you are placing inside of page builder it’s double applying the fullwidth effect and that is breaking the layout.

In your shortcode add this:

usefullwidthdiv="false"

Now you should see it working.

Unfortunately, there isn’t an option or way to make the hover pull in some other photo.

Ben

[Eric]

Eric

#240861

Good afternoon,

I have been referred here from the WordPress support forums. I’m currently using the most up-to-date version of Virtue Premium, but I’m having issues with my cart page using the WooCommerce plugin.

The issue I’m having is that the the small red X button to remove an item from cart is not visible when viewed on mobile. This is a problem for one of my items in particular – membership, which I have set that people can’t select a quantity greater than one. For other items, you can decrease the quantity in checkout which will remove the item from your cart, but for membership, which is restricted to one item per customer, this is not possible. So there is no way to remove the membership item from the cart.

Desktop view – red cross symbol visible on left

Mobile view – no option to remove item:

On the WordPress support forums, it was suggested using the following CSS, however this doesn’t seem to have fixed the issue:

@media only screen and (max-width: 767px) {
.responsive table.shop_table .product-remove {
display: block !important ;
}}

I wondered if you could advise me how to rectify this problem, please?

Thanks in advance.

• This topic was modified 6 years, 5 months ago by Eric.

[Eric]

Eric

#240861

Good afternoon,

I have been referred here from the WordPress support forums. I’m currently using the most up-to-date version of Virtue Premium, but I’m having issues with my cart page using the WooCommerce plugin.

The issue I’m having is that the the small red X button to remove an item from cart is not visible when viewed on mobile. This is a problem for one of my items in particular – membership, which I have set that people can’t select a quantity greater than one. For other items, you can decrease the quantity in checkout which will remove the item from your cart, but for membership, which is restricted to one item per customer, this is not possible. So there is no way to remove the membership item from the cart.

Desktop view – red cross symbol visible on left

Mobile view – no option to remove item:

On the WordPress support forums, it was suggested using the following CSS, however this doesn’t seem to have fixed the issue:

@media only screen and (max-width: 767px) {
.responsive table.shop_table .product-remove {
display: block !important ;
}}

I wondered if you could advise me how to rectify this problem, please?

Thanks in advance.

• This topic was modified 6 years, 5 months ago by Eric.

[Jay Warren]

Jay Warren

#240614

Hi There,
Our theme defines that we have a standard margin on each page. At times we will want the blocks to go full width which I am struggling to achieve.
It works fine when I select full-width in Smart Slider 3 but the full-width button in the Kadence blocks are sticking with the theme’s width.
Any idea’s on how to override this?
Thanks!
Jay

[Jay Warren]

Jay Warren

#240614

Hi There,
Our theme defines that we have a standard margin on each page. At times we will want the blocks to go full width which I am struggling to achieve.
It works fine when I select full-width in Smart Slider 3 but the full-width button in the Kadence blocks are sticking with the theme’s width.
Any idea’s on how to override this?
Thanks!
Jay

[Dave]

Dave

#240261

I am back into the server by sftp.

I believe it’s my styles.css file that’s causing the problem. I changed the name of virtual-premium-child them to virtual-premium-child-old, and created a new virtual-premium-child directory. I placed the newest copies of these files in that server directory:

style.css
WholesalePage.css
function.php

When I tried to install that, I found two identical instances of the same error as in this screen shot.

https://gyazo.com/f5b7a56e5295963dfc02cfb40e5af23e

I opened style.css and found it was no longer formatted. I added this header

/*
 Theme Name:   Virtue Premium Child
 Theme URI:    http://example.com/virtue-premium-child/
 Description:  Virtue Premium Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     virtue_premium
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout
 Text Domain:  virtue-child
*/

/* Theme customization starts here
-------------------------------------------------------------- */

and I was then able to select it as my site theme, but WP wasn’t able to parse the code. Not sure what happened. Here’s what the unedited version of style.css looks like.

/* Theme Name: Virtue - Premium - Child Theme URI: http://example.com/ Description: Child theme for the Virtue theme Author: Dave Burrows Author URI: http://www.meadowcroft-dyeworks.com Template: virtue_premium Version: 0.1.0 */#wwof_product_listing_table select { width: 400px; }.product_item .product_price{display:none}.product_item .kad_add_to_cart,.product_item a.button{display:none}div.product .woocommerce-tabs ul.tabs li.additional_information_tab{display:none}.cart-contents .icon-basket:before { display:none;}.cart-contents i.icon-basket { width: 24px; background: url(http://meadowcroft-dyeworks.com/images/bag.png) no-repeat; height: 24px; margin: 0 auto; padding-right: 27px !important; padding-bottom: 8px;}.custom-icon-home {width: 44px;background: url(http://meadowcroft-dyeworks.com/images/home.png) no-repeat;height: 32px;margin: 0 auto;}.custom-icon-home:hover {width: 44px;background: url(http://meadowcroft-dyeworks.com/images/home-hover.png) no-repeat;height: 32px;margin: 0 auto;}.custom-icon-about {width: 33px;background: url(http://meadowcroft-dyeworks.com/images/about.png) no-repeat;height: 32px;margin: 0 auto;}.custom-icon-about:hover {width: 33px;background: url(http://meadowcroft-dyeworks.com/images/about-hover.png) no-repeat;height: 32px;margin: 0 auto;}.custom-icon-contact {width: 31px;background: url(http://meadowcroft-dyeworks.com/images/contact.png) no-repeat;height: 32px;margin: 0 auto;}.custom-icon-contact:hover {width: 31px;background: url(http://meadowcroft-dyeworks.com/images/contact-hover.png) no-repeat;height: 32px;margin: 0 auto;}.custom-icon-account {width: 31px;background: url(http://meadowcroft-dyeworks.com/images/account.png) no-repeat;height: 32px;margin: 0 auto;}.custom-icon-account:hover {width: 31px;background: url(http://meadowcroft-dyeworks.com/images/account-hover.png) no-repeat;height: 32px;margin: 0 auto;}.custom-icon-yarn {width: 26px;background: url(http://meadowcroft-dyeworks.com/images/yarn.png) no-repeat;height: 32px;margin: 0 auto;}.custom-icon-yarn:hover {width: 26px;background: url(http://meadowcroft-dyeworks.com/images/yarn-hover.png) no-repeat;height: 32px;margin: 0 auto;}a:active {color: #008000;text-decoration: underline;}a:hover {color: #FF0000; /* red - doesn't display correctly */text-decoration: none;}a:link {color: #8a84a5; /* blue - displays correctly */text-decoration: underline;}a:visited {color: #261d3f; /* aqua - displays correctly */text-decoration: underline;}.product .kad_add_to_cart {text-transform: none;}#topbar-search #searchsubmit, .form-search .search-icon, #topbar-search input[type="text"], .topbarmenu ul li a {color: #493F66;border: medium;}#topbar-search input[type=text]:-moz-placeholder {color: #B6B6C5;background: #EDEDF7;}#topbar-search input[type=text]::-moz-placeholder {color: #B6B6C5;}.product_item .price { display: none;}

There’s not a lot of code here. I’m gonna try to figure it out. WholesalePage.css looks fine:

/**
* Product Listing Table
*
* Minimal default styling for the product table
*/
#wwof_product_listing_ajax_content .processing-overlay,
#wwof_product_listing_table_container .processing-overlay {
    background-color: rgba(255, 255, 255, 0.75);
}

#wwof_product_listing_ajax_content .loading-icon,
#wwof_product_listing_table_container .loading-icon {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    width: 35px;
    height: 35px;
    background: url('../images/ajax-loader.gif') no-repeat top left;
}

#wwof_product_listing_filter {
    margin-bottom: 1em;
}

#wwof_product_listing_table tr th {
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

#wwof_product_listing_table tbody tr td {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

.wwof_product_listing_item_thumbnail {
    vertical-align: middle;
    margin-right: 10px;
}

#wwof_product_listing_table .variable_price .price {
    display: none;
}

/* Product listing actions column */
#wwof_product_listing_table .product_row_action .spinner {
    display: none;
    background: url('../images/spinner.gif') no-repeat scroll 0% 0% / 20px 20px transparent;
    opacity: 0.7;
    width: 20px;
    height: 20px;
    margin: 2px 5px 0px;
}
#wwof_product_listing_table .product_row_action .spinner.success {
    background-image: url("../images/check_icon.png");
}
#wwof_product_listing_table .product_row_action .spinner.error {
    background-image: url("../images/error_icon.png");
}

/**
* Popup
*
* Default styling for product details popup
*/
.fancybox-skin {
    padding: 25px !important;
}

.wwof-popup-product-details-container {
    display: block;
    width: 100%;
}

.wwof-popup-product-images {
    float: left;
    width: 38%;
}

.wwof-popup-product-images > img {
    max-width: 100%;
}

.wwof-popup-product-images .gallery {
    margin-top: 10px;
}

.wwof-popup-product-images .gallery img {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 40%;
}

.wwof-popup-product-summary {
    float: right;
    width: 58%;
}

.wwof-popup-product-summary .product-title {
    margin-top: 0;
}

.wwof-popup-product-summary .product-price {
    margin-bottom: 25px;
}

.wwof-popup-product-summary .product-rating {
    margin-bottom: 25px;
}

.wwof-popup-product-summary .product-rating .star-rating {
    font-family: star;
    font-size: 1em;
    height: 1em;
    line-height: 1em;
    overflow: hidden;
    position: relative;
    width: 5.4em;
    float: left;
    margin: 0.5em 4px 0 0;
}

.wwof-popup-product-summary .product-rating .star-rating:before {
    color: #e0dadf;
    content: "sssss";
    float: left;
    left: 0;
    position: absolute;
    top: 0;
}

.wwof-popup-product-summary .product-rating .star-rating span {
    float: left;
    left: 0;
    overflow: hidden;
    padding-top: 1.5em;
    position: absolute;
    top: 0;
}

.wwof-popup-product-summary .product-rating .star-rating span:before {
    content: "SSSSS";
    left: 0;
    position: absolute;
    top: 0;
}

select {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    width: auto;

I’ve got the child theme running again, but it’s still not right.

[Sebastian C.]

Sebastian C.

#240228

Thank you. I added it and the Menu is now correct all the time.

Do more testing shows that the CSS cause some other problem.
It fix the not shown menu fine, but on some other pages a 2nd vertical scroll bar appears on smaller resolution and you can not scroll though.
Test as example on mobile chrome. Same behavior in making the desktop browser very small.

It seems related to the fix…

@media (max-width: 767px){
    #inner-wrap {
    overflow-x: hidden;
}
}

… because when I delete it out of CSS, all is fine again. I post a page with the problem in the next post in private data.

[Ben Ritner]

Ben Ritner

#240146

When I looked with my mobile phone, I did not see any such problem.

That means that Google isn’t able to gather all the styles for your site. This can happen then go away; it really can depend on a few variables; mostly, it’s that the Google mobile tester has had this problem for years, and they haven’t fixed it. There are lots of reports of it online. One way to make it more consistently download your content is to speed up your page load. Here is an image showing the notice of “Page load issues,” which means that Google wasn’t able to render all the styles.

2. You can add this css. The map is not clearing the float because iframe maps are loaded in an absolute position.

@media (max-width: 767px) {
    #kad-banner {
        z-index: 1000;
        position: relative;
    }
}