Search Results for 'page width'

[Clayton]

Clayton

#240034

Hey guys,

I’ve been using the modal block a little bit and noticed something. It seems like when the modal is inside of a row with a fixed max width it doesn’t overlay over the entire page properly. If I move the modal outside a row it seems to work fine. It’s like the modal overlay is getting contrainued by the row.

I’ve noticed this issue on several sites. Let me know if you need login details to take a look.

This is the URL I’m working on right now: *Login to see link

[Clayton]

Clayton

#240034

Hey guys,

I’ve been using the modal block a little bit and noticed something. It seems like when the modal is inside of a row with a fixed max width it doesn’t overlay over the entire page properly. If I move the modal outside a row it seems to work fine. It’s like the modal overlay is getting contrainued by the row.

I’ve noticed this issue on several sites. Let me know if you need login details to take a look.

This is the URL I’m working on right now: *Login to see link

[Mimi]

Mimi

#239947

Thank you soo much, the code removed the logo display.

I don’t understand the width 90% but that was probably done for a reason? {likely to get the menu to spread full width of something} I guess thats not standard? I might try removing it and see if the sidebar pops back up to the side, Without any other things going wrong.

Thank you for the direction I was now able to remove it from all pages except the reviews {testimonials} page.

[Ben Ritner]

Ben Ritner

#239941

Thanks for the feedback, yes the controls in Gutenberg for page width are found on the topbar in your image, you will see that with many different types of blocks as well.

Ben

[Sebastian C.]

Sebastian C.

#239908

Thank you for your answers Ben!

Nice to hear, that we have same opinion in cases of Home-Layout-theme-options and Gutenberg.

About bullet point 4, “4. How to add full width rows on a boxed content page?”
I found a solution in your blocks:
Using a “row layout” and looking directly in the options at the top of the block. I looked all the time in every single option on the right side, but to “break the boxed layout”, you have to use the following options in your “row layout”-block at the top. It does exactly what I need.

(you have to click the image to see the option i mean)

Hope to find the missing blocks (and features) in the future in your block plugin. In the mean time I will deal with everything I have. 🙂

I think I will post some more suggestions and questions in a few days. But before, I will dig deeper into your theme and your plugins. As I said, it’s great! And with the suggestions, it will be perfect!

• This reply was modified 6 years, 6 months ago by Sebastian C..
• This reply was modified 6 years, 6 months ago by Sebastian C..

[Sebastian C.]

Sebastian C.

#239850

Hello Kadence team,
Hello Ben,

First, I want to thank you for your awesome themes and plugins. I used virtue for years for my freelancer site, now bought a lifetime membership to use Ascend for my company. Before I bought it, I tested and read a lot about Astra, Themify, Divi, Avada and some theme-forest themes. And as you see, you are the winner! 🙂

But… starting to import your example ascend themes, I also want to give some suggestions and also some questions.

1. Since Gutenberg is a good and new standard, please add more Gutenberg/Blocks examples without use of page builder. As you have your own great row-design-blocks, I think you don’t need it and it would be much better for us (user) to make use of your examples. I found some, but more would be great!

2. You use all the time (or most of the time) your Ascend “Homepage Design” settings in the theme options, to design the Home site. I personally, don’t like it. Since Gutenberg is here (I think) you should use Page content and your own block. Every Feature Virtue and Ascend have out of “theme options Homepage” settings should be available with your block plugin. That would be great and much more flexible.
Disadvantages of using theme options for home page: Change your theme, home page is gone.
And also you don’t have a WYSIWYG feeling when design a page out of theme options.
For me, I would much more like when your example home pages would be designed with Gutenberg Blocks. Or perhaps show both, the Gutenberg home page style could be another site in the examples, don’t have to be the home site. So you can show both possibilities to make the same design.

3. Most of your page examples are for artists and shops. Would be great to see more corporate identity pages for something like, IT Services, Games, much more technical corporate style and with things like partner-banner, job pages, company history, team, service explanations. I know we can do it with Ascend and Virtue of course, but would be cool to find some examples, because your examples look really, really great and give us great ideas!

Following are more kind of questions, but also some feedback included:
1. Slider Pro in Gutenberg:
I can manage to add your slider pro as Gutenberg block with shortcode. But this lacks the availability of WYSIWYG and see directly the design. Is there a way to add a slider-pro-generated-slider in Gutenberg as block and see it directly? If not, would be nice in the future.

2. Flip Icon Box:
I don’t find Flip Icon Box as Gutenberg block. (example here, middle of the page *Login to see link
Is a shortcode for this available? Would be nice to see it in Gutenberg as Block. (Or do I was to blin to find it?)

3. Three triangle as separator:
You used the design of three triangle as separator for example here: *Login to see link I see it is a page builder feature, but you have your own Gutenberg blocks separator, but you have only one triangle in your own separator. Would be nice to see three triangles in yours, because page builder is not needed anymore. Can I do it with custom CSS already to make 3 triangles out of one triangle with your block separator?

4. How to add full width rows on a boxed content page?
Your did it here: (the row with “Single Column Layout”)
*Login to see link

I also see the CSS in the page wich makes it to full width:
width: 100vw; */
position: relative;
/* left: 50%; */
/* right: 50%; */
/* margin-left: -50vw; */
/* margin-right: -50vw;

But how did you make it with your “Row Layout” block?
Custom CSS? How did you add it? Because I did not get managed to configure such a full width row with your “Row Layout” block. Even when I import the same example and look in the setting, I do not find the option for it. 🙁

5. Animated Text:
Is animated Text only available as shortcode? I did not find it in your Gutenberg blocks. It is a nice feature of your themes, you be available as Block to have it in Gutenberg to be able to better see what your get (WYSIWYG).

6. Flippable images:
I found fliappable images (Products on Sale) for example here on your pages: *Login to see link
Is this feature available in Gutenberg without use of WooCommerce as block or per shortcode?

7. Question about animations:
I saw that you support animations with your Blocks Plugin, that is great. Just a question for that.
I like for example the following enfold example *Login to see link , that there are animations on scroll. (side note: But I don’t like themes which are bringing its own builder.)
Just a question: I think with some hand work and using your row-block and assign animations, can design something similar in your theme and with your blocks and your animations. Or do you see big limitations?
As example the testimonials on the bottom of the page. Will I be able to do such a animations to the face-images with custom CSS to add such an animation on scroll to your testimonials-block?
(If possible, would be nice if you could provide a CSS example to add “animations on scroll” on elements which does not support it out of the box.)

Another good example of many animations on scroll:
*Login to see link
–> Would be really nice to see such an example page in your Ascend example in the future! I think you have most of the features (even with some custom CSS) available!

Hope my post is not too long and questions and topics make sense. 🙂

Best regards and thanks a lot!
Sebastian

• This topic was modified 6 years, 6 months ago by Sebastian C..
• This topic was modified 6 years, 6 months ago by Sebastian C..
• This topic was modified 6 years, 6 months ago by Sebastian C..
• This topic was modified 6 years, 6 months ago by Sebastian C..

[Sebastian C.]

Sebastian C.

#239850

Hello Kadence team,
Hello Ben,

First, I want to thank you for your awesome themes and plugins. I used virtue for years for my freelancer site, now bought a lifetime membership to use Ascend for my company. Before I bought it, I tested and read a lot about Astra, Themify, Divi, Avada and some theme-forest themes. And as you see, you are the winner! 🙂

But… starting to import your example ascend themes, I also want to give some suggestions and also some questions.

1. Since Gutenberg is a good and new standard, please add more Gutenberg/Blocks examples without use of page builder. As you have your own great row-design-blocks, I think you don’t need it and it would be much better for us (user) to make use of your examples. I found some, but more would be great!

2. You use all the time (or most of the time) your Ascend “Homepage Design” settings in the theme options, to design the Home site. I personally, don’t like it. Since Gutenberg is here (I think) you should use Page content and your own block. Every Feature Virtue and Ascend have out of “theme options Homepage” settings should be available with your block plugin. That would be great and much more flexible.
Disadvantages of using theme options for home page: Change your theme, home page is gone.
And also you don’t have a WYSIWYG feeling when design a page out of theme options.
For me, I would much more like when your example home pages would be designed with Gutenberg Blocks. Or perhaps show both, the Gutenberg home page style could be another site in the examples, don’t have to be the home site. So you can show both possibilities to make the same design.

3. Most of your page examples are for artists and shops. Would be great to see more corporate identity pages for something like, IT Services, Games, much more technical corporate style and with things like partner-banner, job pages, company history, team, service explanations. I know we can do it with Ascend and Virtue of course, but would be cool to find some examples, because your examples look really, really great and give us great ideas!

Following are more kind of questions, but also some feedback included:
1. Slider Pro in Gutenberg:
I can manage to add your slider pro as Gutenberg block with shortcode. But this lacks the availability of WYSIWYG and see directly the design. Is there a way to add a slider-pro-generated-slider in Gutenberg as block and see it directly? If not, would be nice in the future.

2. Flip Icon Box:
I don’t find Flip Icon Box as Gutenberg block. (example here, middle of the page *Login to see link
Is a shortcode for this available? Would be nice to see it in Gutenberg as Block. (Or do I was to blin to find it?)

3. Three triangle as separator:
You used the design of three triangle as separator for example here: *Login to see link I see it is a page builder feature, but you have your own Gutenberg blocks separator, but you have only one triangle in your own separator. Would be nice to see three triangles in yours, because page builder is not needed anymore. Can I do it with custom CSS already to make 3 triangles out of one triangle with your block separator?

4. How to add full width rows on a boxed content page?
Your did it here: (the row with “Single Column Layout”)
*Login to see link

I also see the CSS in the page wich makes it to full width:
width: 100vw; */
position: relative;
/* left: 50%; */
/* right: 50%; */
/* margin-left: -50vw; */
/* margin-right: -50vw;

But how did you make it with your “Row Layout” block?
Custom CSS? How did you add it? Because I did not get managed to configure such a full width row with your “Row Layout” block. Even when I import the same example and look in the setting, I do not find the option for it. 🙁

5. Animated Text:
Is animated Text only available as shortcode? I did not find it in your Gutenberg blocks. It is a nice feature of your themes, you be available as Block to have it in Gutenberg to be able to better see what your get (WYSIWYG).

6. Flippable images:
I found fliappable images (Products on Sale) for example here on your pages: *Login to see link
Is this feature available in Gutenberg without use of WooCommerce as block or per shortcode?

7. Question about animations:
I saw that you support animations with your Blocks Plugin, that is great. Just a question for that.
I like for example the following enfold example *Login to see link , that there are animations on scroll. (side note: But I don’t like themes which are bringing its own builder.)
Just a question: I think with some hand work and using your row-block and assign animations, can design something similar in your theme and with your blocks and your animations. Or do you see big limitations?
As example the testimonials on the bottom of the page. Will I be able to do such a animations to the face-images with custom CSS to add such an animation on scroll to your testimonials-block?
(If possible, would be nice if you could provide a CSS example to add “animations on scroll” on elements which does not support it out of the box.)

Another good example of many animations on scroll:
*Login to see link
–> Would be really nice to see such an example page in your Ascend example in the future! I think you have most of the features (even with some custom CSS) available!

Hope my post is not too long and questions and topics make sense. 🙂

Best regards and thanks a lot!
Sebastian

• This topic was modified 6 years, 6 months ago by Sebastian C..
• This topic was modified 6 years, 6 months ago by Sebastian C..
• This topic was modified 6 years, 6 months ago by Sebastian C..
• This topic was modified 6 years, 6 months ago by Sebastian C..

[pdyoko]

pdyoko

#239821

Good morning,

When you have a moment, would one of you clever coders help me figure out where the heck this shadow is coming from. I’m hoping that you can see it.

Sending link. Look on the homepage. You will see a faint yellowish line about 20 px in width running down the left sign of the website. Any ideas what this is? I did change the header logo…but that’s all. <sigh>

Another day in paradise. <laughing>
Thank you,
Pam

[pdyoko]

pdyoko

#239821

Good morning,

When you have a moment, would one of you clever coders help me figure out where the heck this shadow is coming from. I’m hoping that you can see it.

Sending link. Look on the homepage. You will see a faint yellowish line about 20 px in width running down the left sign of the website. Any ideas what this is? I did change the header logo…but that’s all. <sigh>

Another day in paradise. <laughing>
Thank you,
Pam

[Ben Ritner]

Ben Ritner

#239805

Your css is all minified so I can’t tell the source but this css is being added:

 .woocommerce ul.products[class*=columns-] li.product,.woocommerce-page ul.products[class*=columns-] li.product {
                width: 48%;
                float: left;
                clear: both;
                margin: 0 0 2.992em
            }

You would need to remove that, or fix it since it’s forcing 2 columns regardless of whats set.

Ben

[Hannah]

Hannah

#239788

Hi Dave,
That is done using the Kadence Slider. You can learn how to configure it from here: https://www.kadencewp.com/knowledge-base/kadence-slider-configure-slides/
If you are planning to have a slider stretch the width of your page your images should be at least 2000px wide. You can read more about optimal image sizing here: https://www.kadencewp.com/blog/best-practices-for-images-sizes-and-optimization-in-wordpress/
And you can find full theme documentation here: http://docs.kadencethemes.com/virtue-premium/
Hope this is helpful!

Hannah

[Lisa]

Lisa

#239785

How do I change the width of the sidebar on my homepage?

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

[Lisa]

Lisa

#239785

How do I change the width of the sidebar on my homepage?

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

[Marj]

Marj

#239751

I’m not adding it after. If I remove the block and add a new Advanced Gallery block, select my images that have Alt text and captions to create the gallery, I’m still not getting alt text in the source code. This is what I get when I view source code for one of the images:

<img src="https://sbox.oscodacountymi.com/wp-content/uploads/Tom-McCauley-768x960.jpg" width="768" height="960" />

There’s also an issue with hyperlinks in the caption. For example, if I have a gallery of Board of Commissioners that has a caption of their name, their role on the board and then a mailto hyperlink, when I go back to edit the page the block is crashed and it tells me that it has invalid content. It doesn’t crash if I don’t add the mailto hyperlink and just display the email address. (I don’t really like to do mailto hyperlinks, but with this particular website, I have to).

• This reply was modified 6 years, 6 months ago by Ben Ritner. Reason: show code

[Hannah]

Hannah

#239743

1. I’m seeing your link text reflect your basic styling settings. Can you link to an example of this not taking effect?

2. I changed your page template to fullwidth and the sidebar went away.

You need to update to the latest version of the theme. That could be related to why these little things are happening. You can download the latest version from here: https://www.kadencewp.com/my-account/my-api-downloads/

Hope that helps!

Hannah

[Ben Ritner]

Ben Ritner

#239686

1. The Kadence slider height will automatically decrease for smaller screens, you can override this but in this scenario it’s just decreasing at a certain width, it’s still not following the size of the image. The image is still background and still gets cut off based on the size of the slider which is determining the content the background is covering. For example here are two quick screenshots:

2. Your editing on a smaller screen but you are creating content for huge screens. Even your screenshot in windows shows that your design doesn’t fit in the smaller screen. When on your mac the button is being forced down further because you are out of space from your settings, for example, try hiding your left sidebar so you have more editing space and you’ll see the button not have to overflow.

3. “Why does your image have no white space after the menu but before the batting cage image? ” – I was partially scrolled down, the sticky header comes down with the scroll.

You can remove the top white space by adding css:

body.page #content .entry-content > .wp-block-kadence-rowlayout.alignfull:first-child {
    margin-top: -30px;
}

That will detect if your page is being edited with Kadence Blocks and if your first block is a row layout and is fullwidth which is a pretty good tell that you don’t want any top spacing. I may consider even adding it to the theme with more testing.

But you can also change your page layout setting to full content width which will remove the default top and bottom padding. Or inside the block you can add a negative top margin.

With pagebuilder there is css already added to detect if pagebuilder is being used and remove the top padding on the content, it’s css that is basically trying to get out of the way of pagebuilder settings.

I hope that helps!

Ben

[Robert]

Robert

#239611

Question on getting images to be responsive.

On my home page, where I’m using Pagebuilder. I have a SiteOrigin Hero widget with a background image. I have some text I place in the image and a button

see: *Login to see link

I am testing Blocks as well. And trying to mimic the page above. I created a test page with a single column row layout, inside which is a row layou with two horizontal columns. Inside the first horizontal column are two advanced heading blocks. Inside the second horizontal column is another advanced heading. I did this for spacing and I could not get the spacing to mach my SiteOrigin Hero. Maybe there is a better way as I can’t seem to control the spacing using blocks like I can with PageBuilder.

The problem is in both cases, PageBuilder and Blocks, the images don’t shrink when the page is made to an iPad or iPhone size. I read somewhere about doing something like “max-width:100%” for responsive images in css, but not sure how to do that in Blocks or PageBuilder. I had hoped it would not take custom css and would be automatic.

You still have login credentials and the test page is Test.

Oh, by the way, in an earlier post I had mentioned that the classic editor was going away in 2020. You said it wasn’t, but I found an article by wpbeginners, not sure if they are connected with WordPress or not that it was going away in 2022. Here is the link:

*Login to see link

I also uploaded a bit of the content.

[Robert]

Robert

#239611

Question on getting images to be responsive.

On my home page, where I’m using Pagebuilder. I have a SiteOrigin Hero widget with a background image. I have some text I place in the image and a button

see: *Login to see link

I am testing Blocks as well. And trying to mimic the page above. I created a test page with a single column row layout, inside which is a row layou with two horizontal columns. Inside the first horizontal column are two advanced heading blocks. Inside the second horizontal column is another advanced heading. I did this for spacing and I could not get the spacing to mach my SiteOrigin Hero. Maybe there is a better way as I can’t seem to control the spacing using blocks like I can with PageBuilder.

The problem is in both cases, PageBuilder and Blocks, the images don’t shrink when the page is made to an iPad or iPhone size. I read somewhere about doing something like “max-width:100%” for responsive images in css, but not sure how to do that in Blocks or PageBuilder. I had hoped it would not take custom css and would be automatic.

You still have login credentials and the test page is Test.

Oh, by the way, in an earlier post I had mentioned that the classic editor was going away in 2020. You said it wasn’t, but I found an article by wpbeginners, not sure if they are connected with WordPress or not that it was going away in 2022. Here is the link:

*Login to see link

I also uploaded a bit of the content.

[Ben Ritner]

Ben Ritner

#239601

Hey,
You are using a “fullwidth” button. The button is forced to be the width of the page so aligning it doesn’t change because it’s already filling the whole space there is nowhere to align to.

In your button settings set the width to “auto”

Ben

[Hannah]

Hannah

#239578

Sorry, this css should limit the affect to only your homepage:

.home_blog .imghoverclass img {
    margin: auto;
    width: 100%;
}
.home_blog .kt-intrinsic-container.kt-intrinsic-container-center {
    max-width: 372px !important;
    margin: auto;
}

Does that work as you’re wanting?

Hannah

[Rebecca]

Rebecca

#239570

Unfortunately, the .kt-intrinsic-container.kt-intrinsic-container-center selectors are shrinking the featured images on the blog page as well as the thumbnails in “Latest from the Blog.”

Also, the thumbnails used in “Latest from the Blog” are 270x270px. At 500px the image gets blurry.

372px is the width of the border box on the biggest phone in portrait mode. I’d be happy with that max size, if we can get a selector that only changes the “Latest from the Blog” images, and not the images on the front page of the blog.

Thanks,
Rebecca

[Rebecca]

Rebecca

#239562

Hello:
I would like to adjust the alignment of the “Latest from the Blog” section on the home page in phone and tablet view.

Desktop view looks good, where the text is to the right of the thumbnail.

In phone view, “Latest from the Blog” is centered on the page, but not over the single image below it; the image is left all the way to the border edge. The text underneath the image is indented from the left edge (screenshot attached). My client thought this was an error.

I would like the image in phone and tablet view to be 100% of the width of the bordered box. On the phone, this would align “Latest from the Blog” over the image.

The tablet view is less of an issue, with two posts side-by-side under the title, but it also would look more balanced if the thumbnails spanned the width of the bordered boxes around the posts.

The desired 100%-width treatment is already occurring on the Recent Posts carousel on blog pages (screenshot attached).

I don’t want any change in the desktop view.

Phone – Latest from the Blog:

Tablet – Latest from the Blog:

Desktop – Latest from the Blog:

Recent Posts:

Thanks if you can help with a fix here.

[Rebecca]

Rebecca

#239562

Hello:
I would like to adjust the alignment of the “Latest from the Blog” section on the home page in phone and tablet view.

Desktop view looks good, where the text is to the right of the thumbnail.

In phone view, “Latest from the Blog” is centered on the page, but not over the single image below it; the image is left all the way to the border edge. The text underneath the image is indented from the left edge (screenshot attached). My client thought this was an error.

I would like the image in phone and tablet view to be 100% of the width of the bordered box. On the phone, this would align “Latest from the Blog” over the image.

The tablet view is less of an issue, with two posts side-by-side under the title, but it also would look more balanced if the thumbnails spanned the width of the bordered boxes around the posts.

The desired 100%-width treatment is already occurring on the Recent Posts carousel on blog pages (screenshot attached).

I don’t want any change in the desktop view.

Phone – Latest from the Blog:

Tablet – Latest from the Blog:

Desktop – Latest from the Blog:

Recent Posts:

Thanks if you can help with a fix here.

[Ben Ritner]

Ben Ritner

#239430

Hey,
can you send me some screenshots?

I’m not totally following. For starters, this is not a product search: https://customweddinggarter.com/?s=01-B03

That is a site search which will output all post types. For a product search, you have to use a product search widget, that outputs like this: https://customweddinggarter.com/?s=01-B03&post_type=product

Your product flip to image: https://customweddinggarter.com/wp-content/uploads/2019/10/Custom-Colors-01-B03-M34-Color-Palette.jpg

Is not set with meta-information about its size. It’s likely the image is corrupted or your database failed to record the size. The output is width=0 height=0

You can add css to force a size (theme options > advanced settings > custom css):

.product_item .image_flip_back img {
    width: 100%;
    height: 100%;
}

I would suggest uploading a larger image so it’s better quality, especially for retina screens since that is the majority now.

I’m not sure what I am supposed to look for on the single product pages?

Ben

[Sylvain]

Sylvain

#239373

Hi Ben,

I understand that you need elements to debug this problem. Unfortunately, our company does not allow us to provide our login details even though I am personally convinced that you are all very professional people at Kadence 😉!

For information, this product page uses a Template (Kadence Woo Template Builder 1.1.6). But anyway the error also appears with the default WC template.
Moreover, Kadence Blocks is not in question either, we do not use it on this page (and even with KB plugin disabled the error appears).

By disabling “Product Gallery” (Kadence Woocommerce Extras 1.6.1), the problem disappears but it is logical considering the error…

Here are our Product Gallery settings:

• Choose a gallery type = Thumbnails Below Image
• Product image width = 400
• Product image ratio = Square 1:1
• Thumbnail columns visible = 5
• Product thumbnail image ratio = Square 1:1
• Slider transition = Slide
• Slider transition speed = 500
• Slider auto play = True
• Slider pause time = 12000
• Show slide arrows on product image = False
• Show Caption overlay on images = False
• Enable Product Image Hover Zoom = On
• Show image magnification = Magnify window is beside of image

Note that this error has no impact on the functioning of the page.

Do not hesitate if you need more information.

Thanks,
Sylvain

[Rebecca]

Rebecca

#239359

Thanks, Ben. This did move the header consistently to the bottom of the page, but I’m still seeing the issue with the footer now covering up the content as the height of the window is reduced. This is not just a theoretical problem, since on my Macbook Air 13″ this means the images in the grid are half obscured when the window is normal width.

I’ll post screenshots with and without the CSS to show what I mean.