simona6 Posted July 18, 2021 Share Posted July 18, 2021 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? Quote Link to comment https://forums.phpfreaks.com/topic/313403-why-is-my-flex-direction-not-working-on-this-demo-page/ Share on other sites More sharing options...
requinix Posted July 18, 2021 Share Posted July 18, 2021 How about a screenshot of what part of the page is wrong? And a description of what you want it to look like? Quote Link to comment https://forums.phpfreaks.com/topic/313403-why-is-my-flex-direction-not-working-on-this-demo-page/#findComment-1588412 Share on other sites More sharing options...
simona6 Posted July 19, 2021 Author Share Posted July 19, 2021 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. Quote Link to comment https://forums.phpfreaks.com/topic/313403-why-is-my-flex-direction-not-working-on-this-demo-page/#findComment-1588421 Share on other sites More sharing options...
requinix Posted July 19, 2021 Share Posted July 19, 2021 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. Quote Link to comment https://forums.phpfreaks.com/topic/313403-why-is-my-flex-direction-not-working-on-this-demo-page/#findComment-1588422 Share on other sites More sharing options...
simona6 Posted July 19, 2021 Author Share Posted July 19, 2021 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. Quote Link to comment https://forums.phpfreaks.com/topic/313403-why-is-my-flex-direction-not-working-on-this-demo-page/#findComment-1588423 Share on other sites More sharing options...
simona6 Posted July 19, 2021 Author Share Posted July 19, 2021 https://themenectar.ticksy.com//article/11298/ This is what I am trying to do, but on mine, it fails every time. I do have that RTL checkbox, which I Assumed would just do it.. but no. so I did the class and the CSS but again, no. Quote Link to comment https://forums.phpfreaks.com/topic/313403-why-is-my-flex-direction-not-working-on-this-demo-page/#findComment-1588424 Share on other sites More sharing options...
requinix Posted July 19, 2021 Share Posted July 19, 2021 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. 1 Quote Link to comment https://forums.phpfreaks.com/topic/313403-why-is-my-flex-direction-not-working-on-this-demo-page/#findComment-1588426 Share on other sites More sharing options...
Strider64 Posted July 19, 2021 Share Posted July 19, 2021 That's also true for grid elements as well. Quote Link to comment https://forums.phpfreaks.com/topic/313403-why-is-my-flex-direction-not-working-on-this-demo-page/#findComment-1588427 Share on other sites More sharing options...
simona6 Posted July 19, 2021 Author Share Posted July 19, 2021 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. Quote Link to comment https://forums.phpfreaks.com/topic/313403-why-is-my-flex-direction-not-working-on-this-demo-page/#findComment-1588428 Share on other sites More sharing options...
requinix Posted July 19, 2021 Share Posted July 19, 2021 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. Quote Link to comment https://forums.phpfreaks.com/topic/313403-why-is-my-flex-direction-not-working-on-this-demo-page/#findComment-1588431 Share on other sites More sharing options...
simona6 Posted July 19, 2021 Author Share Posted July 19, 2021 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 Quote Link to comment https://forums.phpfreaks.com/topic/313403-why-is-my-flex-direction-not-working-on-this-demo-page/#findComment-1588432 Share on other sites More sharing options...
requinix Posted July 19, 2021 Share Posted July 19, 2021 You should avoid doing that, but as long as you don't have a whole lot of content then it probably won't cause any actual problems. Quote Link to comment https://forums.phpfreaks.com/topic/313403-why-is-my-flex-direction-not-working-on-this-demo-page/#findComment-1588433 Share on other sites More sharing options...
simona6 Posted July 20, 2021 Author Share Posted July 20, 2021 Why should it be avoided? Shame WP Bakery cannot do it, especially when there is the checkout that it states can do it.... Quote Link to comment https://forums.phpfreaks.com/topic/313403-why-is-my-flex-direction-not-working-on-this-demo-page/#findComment-1588439 Share on other sites More sharing options...
maxxd Posted July 20, 2021 Share Posted July 20, 2021 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. Quote Link to comment https://forums.phpfreaks.com/topic/313403-why-is-my-flex-direction-not-working-on-this-demo-page/#findComment-1588442 Share on other sites More sharing options...
simona6 Posted July 20, 2021 Author Share Posted July 20, 2021 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. Quote Link to comment https://forums.phpfreaks.com/topic/313403-why-is-my-flex-direction-not-working-on-this-demo-page/#findComment-1588443 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.