Jump to content

Why is my Flex Direction not working on this demo page?


simona6
 Share

Recommended Posts

https://www.79design.org.uk/direction/

We are trying to use WP Bakery's tools, and the Flex Direction CSS.

@media only screen and (max-width: 1000px)
{
    .home-promo-client-left img, .home-promo-client img
    {
    max-width: 92%;
    margin-left: auto;
    margin-right: auto;
    }
	.home-promo-client-left {
	      margin-right: auto;
    margin-top: auto;
		display: flex !important;
		flex-direction: column-reverse;
	}
}

We have this in the page.  The image part is for another page, but the column reverse for mobile is being ignored.

Any ideas why?

Link to comment
Share on other sites

You see "Left" and "Right".

In WP Bakery they are two columns.  The 'row' has class: home-promo-client-left assigned to it, with the CSS quoted above.

I want that CSS to switch it around on a mobile device.  So on a mobile, Right goes 'above' Left.

Link to comment
Share on other sites

The HTML is structured as div.home-promo-client-left > div.grve-container > div.grve-row > div.grve-column > h3 > span.

The flex and flex-direction is on the home-promo-client-left, but the Left and Right elements are way down in the grve-columns.

Link to comment
Share on other sites

So using WP Bakery, can you see how I make it work, as I was told that's all I needed to do.  Assign that class to the row.  And it should just reverse.

Link to comment
Share on other sites

7 hours ago, simona6 said:

So using WP Bakery, can you see how I make it work, as I was told that's all I needed to do.  Assign that class to the row.  And it should just reverse.

Clearly they were wrong because you did what they said and it didn't work.

flex and flex-direction only affect the element's children, not all its descendants too.

  • Great Answer 1
Link to comment
Share on other sites

Great - so how do you do it?

The other idea is to add another row, with the same text, hide for all devices bar mobile, and them hide the left column on mobile.  So when the screen is smaller, one disappears, the other shows.  But I thought hiding and showing content is bad for SEO.

Link to comment
Share on other sites

2 hours ago, simona6 said:

Great - so how do you do it?

Your current HTML and CSS structures will not work for this. You have to come up with a version where the flex container's immediate children are two distinct elements containing the Left and Right boxes.

In the most minimal form,

<div class="this-is-the-flex-container">
  <div>Left</div>
  <div>Right</div>
</div>

 

2 hours ago, simona6 said:

But I thought hiding and showing content is bad for SEO.

Showing and hiding things for desktop vs. mobile views is extremely common. Just make sure you do it in a way that is good for the user.

Link to comment
Share on other sites

So if I Opted for the method I mentioned.....

A row of two columns (text in first).  Hide first col on mobile. 

Add second row, copy that text in there.  Hide that row on desktop screens, but show on mobile.

Is that acceptable in SEO?  I ask as I was always told that hiding *anything* is bad, even if you show and hide depending on media size.

Simon

Link to comment
Share on other sites

4 hours ago, simona6 said:

Why should it be avoided?

Hidden text could be seen as keyword packing by search engines, and can hurt your ranking.

WP Bakery is a paid plugin, so I'd honestly be a bit surprised if it doesn't do what it claims. The problem could be over-nested elements or, as requinix stated a couple times, the class is assigned to the wrong container element. If it truly doesn't handle the issue, request your money back and be vocal if the author gives you any guff about it.

Link to comment
Share on other sites

thanks.  Sadly WP Bakery's free version has no support, but we have the same issue on a paid theme that has good support, so referred it to them.

If they get it sorted, i'll post on here how it got working.... if it does.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.