Search Results for 'COLUMNS'

[Ben Ritner]

Ben Ritner

#268123

Hey,
Clarification Tablets are 1024-768 so it’s correct that desktop css is 1025px and not 1024

1.
Could we get an option, ideally via customizer, to include orientation options for tablets? Or get a query rewrite that includes orientation that is then customizable in Customiser with a select option? i.e. to allow landscape orientation to display desktop layout”
It’s more complicated than that. Currently, media queries can’t be set to a CSS variable so there is no good option to make them editable since the CSS files are static. Making them completely dynamic isn’t good for performance so until media queries can be set with variables I don’t foresee this being an option. However, I’m always open to creative ideas for how to solve this on a technical side.

A note about the header, we dynamically output css to create that header functionality and it’s “ok” in the context of the amount of css but not ideal for more situations like all of the content etc.

2. I shouldn’t have put 1024 in the css I sent you before. Since that would target tablets and the css I wrote before wasn’t intended for tablets.

However since you are wanting it to target tablets we can do that it just needs to be a little different since it was working with the desktop layout and if you want to apply this to tablets there is no desktop layout to work with, we are instead needing to add that part as well to the 1024px width range.

So updated:

@media screen and (min-width:1024px) {
.has-sidebar .content-container {
    display:grid;
    max-width: 100%;
    padding: 0;
    grid-template-columns: 70% 30%;
    grid-gap: 0;
    justify-content: center;
}
#secondary {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
}
.has-sidebar .site .content-container .alignwide, .has-sidebar .site .content-container .alignfull {
	margin-left: -90px;
	margin-right: -60px;
	max-width: none;
	width: auto;
	padding-left: 0;
	padding-right: 0;
	}
.has-sidebar .site .content-container .wp-block-kadence-column .alignwide, .has-sidebar .site .content-container .wp-block-kadence-column  .alignfull {
    margin-left:0;
    margin-right:0;
}
}

Let me know if that is what you want.

Ben

[Karla]

Karla

#268101

Hi,

Apologies if I missed your questions.

“And changing the screen pixel to 1023px to force a tablet-landscape mode is not displaying correctly either. So do I need to target a more specific class to force desktop layout on 1024px? or go even broader?”

So here is a custom CSS code that can be used to show the desktop layout for 1024px above and start the tablet mode on 1023px:

@media screen and (min-width: 1024px) {
    .has-left-sidebar .content-container {
        grid-template-columns: 2fr 5fr!important;
    }

    .has-sidebar .content-container {
        display: grid;
        grid-template-columns: 5fr 2fr;
        grid-gap: var(--global-xl-spacing);
        -webkit-justify-content: center;
        justify-content: center;
    }
    .has-left-sidebar #main {
        grid-column: 2;
        grid-row: 1;
    }
    .has-left-sidebar #secondary {
        grid-column: 1;
        grid-row: 1;
    }
    .has-left-sidebar .has-sidebar .content-container .kadence-thumbnail-position-behind.alignwide {
        margin-left: -10px;
        margin-right: -10px;
    }
    .has-sidebar .content-container .kadence-thumbnail-position-behind.alignwide {
        margin-left: -10px;
        margin-right: -10px;
        max-width: calc(100% + 20px);
    }
}

This should work with the left/right sidebar layout – https://share.getcloudapp.com/yAuyE6Lx.

“I have my child theme… should that css go into the child theme’s styles.css instead of Customiser’s “Additional CSS” in order for it to load even earlier?”

Placing custom CSS code inside the child theme’s style.css file will make the styles load earlier than the ones from the Customizer > Additional CSS. However, it still should work if you put them in the additional CSS field.

Unfortunately, I cannot say much about feature requests as the development team are the one doing the planning for these additional features. I would send a note to them regarding this so they can address the request regarding “specifically to include ORIENTATION options at 1024px”(tablet).

Regards,
Karla

[michaeljdeibert]

michaeljdeibert

#268047

Hi,

1024px is a tricky screen size to target. It’s the upper range of the longest possible resolution size for tablets (according to THIS chart.

Some designers want to keep all tablet sizes the same, whether in portrait or landscape orientation. But others, myself included, want to use a horizontal orientation when the tablets are horizontal, especially when sidebars are included (as they often are on desktop layouts).

Right now, that’s not possible via Customiser and I’m running into troubles achieving it via CSS.
[Note, there is already a theme feature request with 49 upvotes… so this customisation seems wanted.]

It’s been noted that the current Kadence breakpoints are:
– 1024px and above: Desktop
– below 1024px to 768px: Tablet
– below 768px: Mobile

Except when viewing the actual @media queries in all.min.css, the actual desktop layout option targets 1025px and above… not 1024px.

@media screen and (min-width: 1025px){.has-sidebar .content-container{display:grid;grid-template-columns:5fr 2fr;grid-gap:var(--global-xl-spacing);-webkit-justify-content:center;justify-content:center}...}

1. Could we get an option, ideally via customiser, to include orientation options for tablets? Or get a query rewrite that includes orientation that is then customisable in Customiser with a select option? i.e. to allow landscape orientation to display desktop layout. (if not, then it defaults to tablet layouts instead.)

______________

2. My Current CSS Issue:

Working with Ben, we’ve included css to adjust the paddings regarding my right sidebar. The target screen size in our css is min-width:1024px.

/* remove padding for sidebar template and allow full-width within inner content area */

@media screen and (min-width:1024px) {
.has-sidebar .content-container {
max-width: 100%;
padding: 0;
grid-template-columns: 70% 30%;
grid-gap: 0;
}
.has-sidebar .site .content-container .alignwide, .has-sidebar .site .content-container .alignfull {
margin-left: -90px;
margin-right: -60px;
}
.has-sidebar .site .content-container .wp-block-kadence-column .alignwide, .has-sidebar .site .content-container .wp-block-kadence-column .alignfull {
margin-left:0;
margin-right:0;
}
}

It should be overwriting the “grid-template-columns:” choice in the all.min.css code cited above – but it’s not. And changing the screen pixel to 1023px to force a tablet-landscape mode is not displaying correctly either.
[Tested both in Chrome developer in their desktop = 1024px screen size, but also in a custom iPad-Horizontal size – and on my ipad itself in landscape orientation. As usual, all caches cleared, no change.]

However, when I adjusted the few other css changes that involve the 1024px media query, those ARE adjusted. So do I need to target a more specific class to force desktop layout on 1024px? or go even broader?
I have my child theme… should that css go into the child theme’s styles.css instead of Customiser’s “Additional CSS” in order for it to load even earlier?

Help would be appreciated. Thanks!

[michaeljdeibert]

michaeljdeibert

#268047

Hi,

1024px is a tricky screen size to target. It’s the upper range of the longest possible resolution size for tablets (according to THIS chart.

Some designers want to keep all tablet sizes the same, whether in portrait or landscape orientation. But others, myself included, want to use a horizontal orientation when the tablets are horizontal, especially when sidebars are included (as they often are on desktop layouts).

Right now, that’s not possible via Customiser and I’m running into troubles achieving it via CSS.
[Note, there is already a theme feature request with 49 upvotes… so this customisation seems wanted.]

It’s been noted that the current Kadence breakpoints are:
– 1024px and above: Desktop
– below 1024px to 768px: Tablet
– below 768px: Mobile

Except when viewing the actual @media queries in all.min.css, the actual desktop layout option targets 1025px and above… not 1024px.

@media screen and (min-width: 1025px){.has-sidebar .content-container{display:grid;grid-template-columns:5fr 2fr;grid-gap:var(--global-xl-spacing);-webkit-justify-content:center;justify-content:center}...}

1. Could we get an option, ideally via customiser, to include orientation options for tablets? Or get a query rewrite that includes orientation that is then customisable in Customiser with a select option? i.e. to allow landscape orientation to display desktop layout. (if not, then it defaults to tablet layouts instead.)

______________

2. My Current CSS Issue:

Working with Ben, we’ve included css to adjust the paddings regarding my right sidebar. The target screen size in our css is min-width:1024px.

/* remove padding for sidebar template and allow full-width within inner content area */

@media screen and (min-width:1024px) {
.has-sidebar .content-container {
max-width: 100%;
padding: 0;
grid-template-columns: 70% 30%;
grid-gap: 0;
}
.has-sidebar .site .content-container .alignwide, .has-sidebar .site .content-container .alignfull {
margin-left: -90px;
margin-right: -60px;
}
.has-sidebar .site .content-container .wp-block-kadence-column .alignwide, .has-sidebar .site .content-container .wp-block-kadence-column .alignfull {
margin-left:0;
margin-right:0;
}
}

It should be overwriting the “grid-template-columns:” choice in the all.min.css code cited above – but it’s not. And changing the screen pixel to 1023px to force a tablet-landscape mode is not displaying correctly either.
[Tested both in Chrome developer in their desktop = 1024px screen size, but also in a custom iPad-Horizontal size – and on my ipad itself in landscape orientation. As usual, all caches cleared, no change.]

However, when I adjusted the few other css changes that involve the 1024px media query, those ARE adjusted. So do I need to target a more specific class to force desktop layout on 1024px? or go even broader?
I have my child theme… should that css go into the child theme’s styles.css instead of Customiser’s “Additional CSS” in order for it to load even earlier?

Help would be appreciated. Thanks!

[Karla]

Karla

#268024

Hello,

Kindly add a CSS property for the previous link:

.post-navigation .nav-links {
    grid-template-columns: 1fr 1fr;
}

.post-navigation .nav-previous {
    order: 1;
    grid-column-start: 2; //add this CSS property
    text-align: right;
}
.post-navigation .nav-previous:after {
    content: none;
}
.post-navigation .nav-next {
    position: relative;
    grid-column-start: unset;
    text-align: unset;
}

.post-navigation .nav-next:after {
    position: absolute;
    content: '';
    top: 25%;
    right: 0;
    width: 1px;
    height: 50%;
    background: var(--global-gray-500);
}

Hope this helps.

Best Regards,
Karla

[Karla]

Karla

#268006

Hello,

Just to confirm, do you just want to switch the column position of the previous and next navigation? Something like this – https://share.getcloudapp.com/Qwu5zBrL?

If so, here is the custom CSS code I used on the screen recording above:

.post-navigation .nav-links {
    grid-template-columns: 1fr 1fr;
}

.post-navigation .nav-previous {
    order: 1;
    text-align: right;
}
.post-navigation .nav-previous:after {
    content: none;
}
.post-navigation .nav-next {
    position: relative;
    grid-column-start: unset;
    text-align: unset;
}

.post-navigation .nav-next:after {
    position: absolute;
    content: '';
    top: 25%;
    right: 0;
    width: 1px;
    height: 50%;
    background: var(--global-gray-500);
}

Hope this helps and let us know if we can assist you further.

Best Regards,
Karla

[Hannah]

Hannah

#267994

Hey Anita,
So sorry for the delay! I’m not sure why that isn’t working. Try copying this shortcode and using it instead:
[product_categories number="6" parent="0" columns="3"]
I just tested it and had no issues. Let me know how it works for you!

Kindly,
Hannah

[michaeljdeibert]

michaeljdeibert

#267981

Forgot the last reference I tried… which was actually based off a different thread here: https://www.kadencewp.com/support-forums/topic/row-layout-options-missing/#post-261197

While it sounds like that user wanted exactly what I want, her proposed option (which worked) makes zero sense to me. Is it code? Is it shorthand for what I tried above with two columns & sub-columns? …
row > [40 column > row > 2 columns] [60 column > row > 3 columns]

Michael

[michaeljdeibert]

michaeljdeibert

#267980

Hi,

Note: the element is [kadence_element id="7170], which shows both the original 5-column row layout I’m trying to tweak but also the adjusted, mobile-only version. On desktop it’ll show [kadence_element id="8919], which is identical but carry-over from a failed attempt to resolve a different issue.

I’m doubtful that it’s something in my current css… while I’ve since added more tweaks, Ben had a decent look over it previously. But as for css conflicting with something else, perhaps…

However, even that’s questionable because one of the css solutions I tried used unique classes added to that specific 5-column layout and then each of the 5 sections inside – it still didn’t work correctly. Or rather, it DID arrange the sections, but then it didn’t centre the last row with the odd item (as written) and worse – the contents inside the section were lost after implementation (contents are Kadence’s Info Box block).

That code was:

/* adjust grid for rating element on mobile screens */
@media (max-width: 767px) { 
.rating-box-mobile-grid {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	}
.rating-box-mobile-grid-section {
		grid-column: span 2;
	}
.rating-box-mobile-grid-section-odd:nth-last-child(1):nth-child(odd) {
		grid-column: 2 / span 2;
		}
	}
}
}

[While it was originally written for SASS, I rewrote it for CSS. The reference for this was: https://www.billerickson.net/css-grid-center-last-item/ This code is still in the “Custom CSS” sections within the block, but it made no effect there nor just using the class selectors alone.]

But as noted, I’ve tried other options as well.

I tried to set the row as a 2 columns layout, with 3 sections in the first and 2 sections in the last. That way it would collapse as default on mobile. But then no matter what padding/margin/spacing options I tried, I could not get it to actually equally space in the row while on desktop & tablet. There was always a wonky, off-balance look.

I tried a different css out, via grid:

/* adjust grid for ratings box on mobile screens */
@media (max-width: 767px) { 
.rating-box-mobile-grid {
	flex: 3
}

The goal was then to have the last two sections wrap below by using the unique class on the row layout… but alas, nope.

And as noted, I tried applying a similar grid option as Ben helped sort for my footer here: https://www.kadencewp.com/support-forums/topic/new-footer-row-collapse-layout-for-mobile/#post-267790 But even adjusting that for a 5 column grid didn’t work, nor did any other options using a grid.

Michael

[michaeljdeibert]

michaeljdeibert

#267958

The issue is with the Row Layout block, when there are 5 columns. Under mobile layout options, the only two pre-selected ones are squeezing them all horizontally or stacking vertically. Neither apply to what I need.

The goal: on mobile only, the 5 columns in my “Rating Box” wrap within a 3 column grid. (Thus one row of the first three columns, a second row of the last two – ideally centred)

The old solution, a carryover from Elementor, was to duplicate the element, adjust the layout for mobile, and then tweak the visibility settings to only show that adjusted element on Mobile screens (while still loading the hidden element). That’s how it currently is on the staging site.

BUT I’m trying to simplify and clean up everything so it works with just one hooked element, not double. Plenty of sources, including a few other threads on here, note that such a layout option is possible – except I cannot get it work. (I’ve tried tweaking the # columns and rows, trying the horizontal vs vertical section layout, and more) Heck, Ben was able to help tweak the mobile layout in my footer as well – but I couldn’t even get that solution to apply here. I’m probably missing something obvious, or the options I’ve tried are being overrun by higher css styling.

Here’s a page where the troublesome Row Layout is visible: *Login to see link

Note: the issue specifically pertains to mobile screens <768px, and that I currently have set BOTH blocks to show on mobile. They should look the same in the end.

Thanks

[michaeljdeibert]

michaeljdeibert

#267958

The issue is with the Row Layout block, when there are 5 columns. Under mobile layout options, the only two pre-selected ones are squeezing them all horizontally or stacking vertically. Neither apply to what I need.

The goal: on mobile only, the 5 columns in my “Rating Box” wrap within a 3 column grid. (Thus one row of the first three columns, a second row of the last two – ideally centred)

The old solution, a carryover from Elementor, was to duplicate the element, adjust the layout for mobile, and then tweak the visibility settings to only show that adjusted element on Mobile screens (while still loading the hidden element). That’s how it currently is on the staging site.

BUT I’m trying to simplify and clean up everything so it works with just one hooked element, not double. Plenty of sources, including a few other threads on here, note that such a layout option is possible – except I cannot get it work. (I’ve tried tweaking the # columns and rows, trying the horizontal vs vertical section layout, and more) Heck, Ben was able to help tweak the mobile layout in my footer as well – but I couldn’t even get that solution to apply here. I’m probably missing something obvious, or the options I’ve tried are being overrun by higher css styling.

Here’s a page where the troublesome Row Layout is visible: *Login to see link

Note: the issue specifically pertains to mobile screens <768px, and that I currently have set BOTH blocks to show on mobile. They should look the same in the end.

Thanks

[Anita]

Anita

#267834

Hello Hannah!

Ok, I see.

Anyway, now I’m trying to use the original shortcode, but with 3 columns (not 4): but it does not work, it shows the categories only in 4 columns:

[product_categories number=”6″ columns=”3″ orderby=”menu_order” parent=”0″]

Can we fix it somehow?

The site:
https://bit.ly/3A8H87W

Thanks a lot,
Anita

[Ana]

Ana

#267808

Hi there,

I have a two column section. The left contains all of the text, and the right is just a background image without any content. How can I make it so that the right column is the same height as the left in CSS?

Thanks!

[Ana]

Ana

#267808

Hi there,

I have a two column section. The left contains all of the text, and the right is just a background image without any content. How can I make it so that the right column is the same height as the left in CSS?

Thanks!

[Anita]

Anita

#267794

Hello Support team!

I use this shortcode to display the main product categories on the page:

[product_categories number=”12″ columns=”4″ orderby=”menu_order” parent=”0″]

How can I exclude some main categories, so not to display all of them?

Thanks a lot,
Anita

[Anita]

Anita

#267794

Hello Support team!

I use this shortcode to display the main product categories on the page:

[product_categories number=”12″ columns=”4″ orderby=”menu_order” parent=”0″]

How can I exclude some main categories, so not to display all of them?

Thanks a lot,
Anita

[michaeljdeibert]

michaeljdeibert

#267762

Re: Chris’ question (which I now no longer can view in this thread…?):

The block that is not aligning with the rest of the centred widget is a non-Kadence block (perhaps why it’s not being centre, which would be a different bug itself for the theme).

But if we can get to a layout with the Middle column at 100% width, splitting the other two columns – I wouldn’t want column 1 to be centred.

Michael

[michaeljdeibert]

michaeljdeibert

#267761

Hi,

This is not my first issue with your support team, nor the first time I have felt treated like an idiot by them. Especially since Karla’s answer was essentially the equivalent of “here the FAQ/Documentation”, gilded with a “Hope that helps!” closure.

Yes, perhaps you get users who cannot read the documentation before asking questions – but it’s the presumption and lack of actually reading about the issue as explained that was entirely offensive. And again, it’s not the first time I’ve gotten such a treatment from support. Yes, this is the public forum instead of the private support ticket for my Kadence Membership package – but “silly me”, I thought that perhaps other users might have had an answer rather than wait days for your specific reply.

Yet again, you are “presuming” – and still getting it wrong. It IS a new layout option I am asking about, specifically one that addresses the column collapse order (and width settings), for a row with three columns, that features the MIDDLE column first at 100% width (not the first column at 100%, nor the last column at 100%), with the other two columns (left and right, or 1 and 3) split 50/50% width below. [As edited in the previously provided image.]

Since you can only “understand” visually with video and images that take longer to create than type the initially provided detailed description, perhaps this will help you:
https://share.getcloudapp.com/Apu9eBAx
It follows along rather nicely to my original description of the issue. So sorry for omitting an article or two, and failing to include the quotes to correctly name your theme’s currently provide layout options…

“…the footer. The middle row has three columns, …The issue is with the mobile (device) settings, specifically (the) row collapse layout & order. Right now, it’s set for three vertical(ly stacked) 100% rows (instead of 3 columns on wider screens). … if there was a layout for “MIDDLE ROW 100%”, with the left & right at 50% below (or even above) the other two. Nearly identical to the current “First Row 100% & 50/50” split layout, or the reverse “Last Row 100% & 50/50” split. …

According to my understanding of flex boxes, yes, this should be achievable via css. But all your provided css solution did was swap the order around; placing the middle column first (without resizing it to the full 100% width) nor did it split the other two columns 50/50 below. [Which is the new LAYOUT option initially requested.]

The theme currently provides clickable buttons to change this utilising a visual/description for eight differently layouts – appropriately labeled “Layout” in the toolbar. If that is how it is set up on the backend via css, then css should equally be a good solution. But so would adding a new layout button that features the Middle Row at 100%, with the other two columns split 50/50, as requested.

Michael

[Ben Ritner]

Ben Ritner

#267745

Hi,

Please understand we are trying to help you. Three of us are reading your question here trying to make sense of it. I understand you feel you are being clear, I kindly ask for your patience since we do not feel that you are being clear and it’s our goal to help so asking follow-up is part of the support process. I personally did not understand what you were asking after reading your first post multiple times.

Comments like “First, can support personnel please stop treating their paying customers like idiots, and perhaps actually read our queries before presuming we simply don’t know how to use your theme? Thanks.” bring our whole team down.

We read and re-read questions a lot trying to make sense of things. However, it’s not always very clear. That’s why we often ask for images to help.

So thank you for the image. It’s doesn’t seem like you want a new layout, at least not in how you deal with this regarding CSS. It seems like you want to be able to change the order of the inner columns. Here is the css that I think you want:

@media (max-width: 720px) {
.site-footer-middle-section-2 {
    order: -1;
}
}

If that is not what you want, please be patience as we try and get you the best solution 🙂

Ben

[Hannah]

Hannah

#267739

Hi Jenny,
Sorry for the delay! This thread seems to have gotten lost in the mix. I apologize!
I believe the theme will automatically display posts based on when they were last edited. If you’re wanting your posts to display in ascending order you can use a shortcode like this: [blog_grid orderby=date order=ASC items=6 columns=3] Would that work for you? You could also use the post grid/carousel block from Kadence Blocks Pro.
Let me know how I can help moving forward!

Kindly,
Hannah

[Stefan Lindblad]

Stefan Lindblad

#267731

Hi,

1) With the page “Blog” we collect all blogs in one place. Like 1 row & 3 columns, or 3 x 3 row and columns etc.

Question

2) How to create the same behaviour for all projects (portfolio pages) (without removing/using the blog feed settings mentioned in point 1.

question

3) Is it possible to use a Block, like a Gutenberg/Kadence block on a regular page picking up all these project pages or the pages I like to show up on one page?

I ask this because on my Portfolio page as an illustrator I have my regular portfolio galleries, and I also write a blog. But I also created a set of “Case Study” pages clients use to read up on previous cases I made.

In conlusion I need to keep blog feed as is. And then have “Latest projects” allowed on a regular page and not just in the footer.

Best regards
Stefan

[Stefan Lindblad]

Stefan Lindblad

#267731

Hi,

1) With the page “Blog” we collect all blogs in one place. Like 1 row & 3 columns, or 3 x 3 row and columns etc.

Question

2) How to create the same behaviour for all projects (portfolio pages) (without removing/using the blog feed settings mentioned in point 1.

question

3) Is it possible to use a Block, like a Gutenberg/Kadence block on a regular page picking up all these project pages or the pages I like to show up on one page?

I ask this because on my Portfolio page as an illustrator I have my regular portfolio galleries, and I also write a blog. But I also created a set of “Case Study” pages clients use to read up on previous cases I made.

In conlusion I need to keep blog feed as is. And then have “Latest projects” allowed on a regular page and not just in the footer.

Best regards
Stefan

[Hannah]

Hannah

#267711

Hey Laurent,
The portfolio grid block doesn’t allow you to have the exact same layout as the portfolio template does. If you’re wanting to only use blocks then one option would be to add a portfolio shortcode to a shortcode block like this: [portfolio_posts orderby=date excerpt=false columns=4 items=4 height=200 lightbox=true showtypes=true cat=photos]
Would that work for you? Otherwise, you can use css to style the block to be more like the template. Let me know if you would like to go that route and I would be happy to help!

Kindly,
Hannah

[Karla]

Karla

#267682

Hello,

Thank you for reaching out to us and apologies for the delay in getting back to you.

It looks like the Info Box that once it has a URL it becomes clickable. But when I want to delete the URL so that it’s empty, the info box retains its “clickability” even when there is no URL in the link field. If clicks, it reloads the page, which is unnecessary.

I was able to replicate this and I’ll send a note regarding it to the development team. For now, a workaround is to select Only Learn More Text for the Link Content option.

it would be brilliant if there was a ribbon I can attach to the image portion as well, as I’m using the Info box instead of LearnDash’s course grid, in which the Info box is way more flexible.

The Info Box block has an option to use an image instead of an icon. What you can do is to create an image with that ribbon, upload it on your website, and select it on the block settings – https://share.getcloudapp.com/5zuNrXgW.

Any chance of the Info Box having a “Container Min Width,” please?

Are you perhaps referring to max-width? I’ll pass this on as a feature request. However, please note that we cannot give an ETA of when this will be added as the development team considers certain factors before implementing new ones.

For now, you can add this in the Section’s Custom CSS:

@media screen and (min-width: 1024px) {
  selector .kt-inside-inner-col {
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  selector .kt-inside-inner-col > * {
    flex: 1;
  }
}

This should make the Info Box blocks show as columns with equal widths.

Hope this helps and let us know if we can assist you further.

Best Regards,
Karla

[michaeljdeibert]

michaeljdeibert

#267656

On my one site (currently in staging) *Login to see link , I’m having a bit of a struggle with the footer. The middle row has three columns, and I’m using Widget 1, Widget 2, and Widget 3 WP core areas to add the inner content.

The issue is with the mobile settings, specifically row collapse layout & order. Right now, it’s set for three vertical 100% rows. Which would work… except a block within Widget 1 is NOT centering like the rest of the widget contents. (it’s a non Kadence block, so I’m trying to figure a way to target & tweak that with CSS… if I can resolve that, then this issue may be moot.)

However, the entire issue would be resolved if there was a layout for MIDDLE ROW 100%, with the left & right at 50% below (or even above) the other two. Nearly identical to the current First Row 100% & 50/50 split layout, or the reverse Last Row 100% & 50/50 split. I don’t know Customiser at all, so not even sure where to begin to target this myself within my child theme.

The reason I’m wanting this is because I have a navigation menu on the left, social media icons on the right, and a subscribe box in the middle. I feel this is a layout option that many other users could benefit from as well because it allows us to focus on the middle column first/last.

After another look, it’s also something that actually could benefit ALL mobile layouts, ie Row Layout Blocks even – not just within the footer! (I can submit a feature request for that, if that would help)

Thanks!

[michaeljdeibert]

michaeljdeibert

#267656

On my one site (currently in staging) *Login to see link , I’m having a bit of a struggle with the footer. The middle row has three columns, and I’m using Widget 1, Widget 2, and Widget 3 WP core areas to add the inner content.

The issue is with the mobile settings, specifically row collapse layout & order. Right now, it’s set for three vertical 100% rows. Which would work… except a block within Widget 1 is NOT centering like the rest of the widget contents. (it’s a non Kadence block, so I’m trying to figure a way to target & tweak that with CSS… if I can resolve that, then this issue may be moot.)

However, the entire issue would be resolved if there was a layout for MIDDLE ROW 100%, with the left & right at 50% below (or even above) the other two. Nearly identical to the current First Row 100% & 50/50 split layout, or the reverse Last Row 100% & 50/50 split. I don’t know Customiser at all, so not even sure where to begin to target this myself within my child theme.

The reason I’m wanting this is because I have a navigation menu on the left, social media icons on the right, and a subscribe box in the middle. I feel this is a layout option that many other users could benefit from as well because it allows us to focus on the middle column first/last.

After another look, it’s also something that actually could benefit ALL mobile layouts, ie Row Layout Blocks even – not just within the footer! (I can submit a feature request for that, if that would help)

Thanks!