Kadence WP – Remove Column From Content Flow On Mobile

Goals: 1) On desktop, laptop, tablet: fill screen with 2 columns (that have unique content in each column). 2) On mobile phone: display only 1 column (and its content) and remove the other column (and its content) from the content flow.

The final CSS that accomplishes the goal

@media only screen and (max-width: 768px) {
	.remove-on-mobile {
    display: none;
	}
    .grow-on-mobile {
	flex: auto !important;
	margin: 0 !important;
	}
}

The desktop layout is made using the Kadence Row Layout Block with a 2 column (Section) layout. Then, for the mobile phone screen layout, one of the two Kadence columns (Sections) is removed from the content flow and the remaining visible column is set to grow to fill the mobile phone’s viewport. The customizations for the mobile phone view are accomplished with additional CSS classes and custom CSS.

• Add Additional CSS classes to Kadence Row Layout Blocks
• Add custom CSS using Code Snippets

Add Additional CSS classes to Kadence Row Layout Blocks

In the Page editor (in the “buttons” column): Navigate to Kadence Row Layout Block > Section Block > Advanced. In the Additional CSS class(es) field, type remove-on-mobile

In the Page editor (in the “tagline” column): Navigate to Kadence Row Layout Block > Section Block > Advanced. In the Additional CSS class(es) field, type grow-on-mobile

Now that the Additional CSS classes have been created, it’s time to add the custom CSS.

Add custom CSS using Code Snippets

Use the free Snippets WordPress plugin to add custom CSS to the WordPress environment. Bonus: Adding custom CSS via the Code Snippets plugin prevents the custom CSS from being wiped out when/if a different theme is installed.

Use a media query to restrict when the custom CSS is used

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

The media query forces the custom CSS to ignore desktop, laptop, and tablets screens and only target mobile phone screens. Read more on media queries.

Remove the “buttons” column from the content flow

.remove-on-mobile {
display: none;
}

Why do we need display: none? display: none forces content to be completely removed from the content flow. There are other ways to remove content from the screen like visibility: hidden and position: relative but they’re not as complete for our needs. Read more from What are the CSS properties that get elements out of the normal flow?

Force the remaining visible “tagline” column to fill viewport

.grow-on-mobile {
flex: auto !important;
margin: 0 !important;
}

Why do we need flex: auto !important? The Kadence theme uses the flex: none CSS shorthand for its default mobile phone layout. This default setting prevents our tagline content from being centered vertically on the mobile phone screen because of the flex-grow: 0 portion of the flex: none shorthand. Since we want to vertically center our home page tagline in the viewport on mobile phone, we override the Kadence theme default CSS with custom CSS, like so:

flex: auto !important

More details about the Flex CSS shorthand property:

flex: none is equivalent to flex: 0 0 auto, which is shorthand for:

• flex-grow: 0
• flex-shrink: 0
• flex-basis: auto

flex: none sizes the flex item according to the width / height of the content, but doesn’t allow it to shrink. flex: none also means the item will not grow when there is free space available and that the item is fully inflexible. We definitely want the item to be flexible and to grow to fill the mobile phone’s viewport. Source: “Flex: none” vs. Non-specified (omitted) flex property and flex by CSS-Tricks

In order for the item (in this case, the tagline) to be flexible and grow to fill the mobile phone’s viewport, we use flex: auto, which is shorthand for:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: auto

It’s that flex-grow: 1 part of the shorthand (1 = yes) that allows the CSS wrapper around our tagline to grow and fill the mobile phone’s viewport. This in turn allows the tagline content to be centered vertically within the mobile phone’s viewport.

It is recommended that you use this shorthand property rather than set the individual properties. The shorthand sets the other values intelligently. Source: A Complete Guide to Flexbox by CSS-Tricks

Why do we need margin: 0 !important? We use this custom CSS to override the Kadence theme’s default mobile phone layout.

Putting all of the CSS together

@media only screen and (max-width: 768px) { /* On screens 768px and smaller */
	.remove-on-mobile { /* Phone screen: home page: remove right column (buttons) from content flow */
    display: none;
	}
    .grow-on-mobile { /* Phone screen: home page: fill viewport with left column (tagline) */
	flex: auto !important; /* Override Kadence theme's default mobile flex "none" setting with "auto !important" */
	margin: 0 !important; /* Override Kadence theme's default mobile margin setting to fill viewport as much as possible */
	}
}

/* Comments have been added to the CSS for clarity */

Where does the custom CSS go?

Note: Set the Snippet to “Only run on site front-end”

Notes

The content pileup

What does the mobile phone display look like if we don’t add any custom CSS?

The 2 columns of content from the desktop layout get piled up on top of each other on mobile. This is normal responsive behavior when displaying 2 desktop columns on mobile. Since the end-goal is to remove the buttons and have just the tagline vertically-centered on mobile phone, we need to create custom CSS targeting just mobile phone screens.

Step 1: Add the custom class remove-on-mobile to the Kadence Row Layout Block’s button column (Section).

Step 2: Create .remove-on-mobile custom CSS in Snippets and add display: none. This works great to remove the buttons column from content flow on mobile phone screen. But…

While the display: none in the .remove-on-mobile custom CSS works great to remove the buttons column from content flow on mobile phone screen, it’s not enough to reach our goal. The tagline in the remaining visible tagline column is locked to the top of the phone’s viewport, leaving the rest of the viewport empty. The goal is to have the tagline be vertically centered in the phone’s viewport.

Inspect the web page’s HTML and CSS

Using the browser’s Inspect Element tool we can locate the Kadence theme’s default mobile CSS Selectors and see what needs to be customized. Read Hubspot’s guide: How to Use Inspect Element in Chrome, Safari, and Firefox.

Let’s find the exact HTML on the page that contains the column with our tagline. Then we can experiment with its CSS.

From the browser, open the Web Inspector panel (Safari > Develop > Show Web Inspector) and use the Element Selection tool to highlight the remaining visible column that contains our tagline. In the HTML section of the Elements tab, the <div> item should be highlighted. Also look for the grow-on-mobile class at the end of the div’s string of classes to make sure we’re experimenting on the correct <div>.

In the CSS section of the Elements tab is the Kadence theme’s @media, CSS Selectors, and CSS rules for mobile phone layout:

@media (max-width: 767px)
.kt-row-column-wrap.kt-mobile-layout-row > .wp-block-kadence-column
{
    flex: none;
    width: 100%;
    margin-right: 0;
}

Changing the flex: none CSS to flex: auto successfully allowed our tagline column to grow and fill the viewport – which vertically centers our tagline in the phone’s viewport. This is exactly what we want. Now we know that we need to add flex: auto to our custom CSS. One extra parameter needs to be added to our custom CSS: !important. !important forces our custom CSS to override the Kadence theme’s default CSS. See grow-on-mobile section in this article.