simona6 Posted July 24 Share Posted July 24 We have two DIVs created in WP Bakery. Left and right. On a phone I want to change the width of the right DIV, so it is 85% or so, but centre it, so there is the equal space left and right. Since it is Float: Right, I can't do that. Even wtih a Margin Left/Right auto, it just nudges to the left. How do I override it so on a phone, it snaps to the middle, wtih 85% width? Thanks Quote Link to comment https://forums.phpfreaks.com/topic/322520-can-you-center-a-div-on-mobile-that-is-float-right/ Share on other sites More sharing options...
requinix Posted July 24 Share Posted July 24 If you can create CSS rules that target mobile devices then you can create CSS rules that target desktops... Quote Link to comment https://forums.phpfreaks.com/topic/322520-can-you-center-a-div-on-mobile-that-is-float-right/#findComment-1630759 Share on other sites More sharing options...
maxxd Posted July 24 Share Posted July 24 Use media queries to create rules based on screen size or browser device as requinix suggested. Though admittedly you may have some work ahead of you as WPBakery (as far as I recall - thankfully it's been a while since I've had to deal with its output) has a tendency to overdo it with the built in CSS. Quote Link to comment https://forums.phpfreaks.com/topic/322520-can-you-center-a-div-on-mobile-that-is-float-right/#findComment-1630764 Share on other sites More sharing options...
simona6 Posted July 28 Author Share Posted July 28 I love WPB.... I think the answer is that you have to disable the Float on BOTH/ALL the Divs in the row, before you can then centre one. As centering one, when it is Float.. just doesn't work. I'm familiar of course with Media Queries etc. Thanks. But yes I think you have to do BOTH/ALL divs to get the result. Quote Link to comment https://forums.phpfreaks.com/topic/322520-can-you-center-a-div-on-mobile-that-is-float-right/#findComment-1631173 Share on other sites More sharing options...
gizmola Posted July 30 Share Posted July 30 Layout these days is best handled with flexbox or grid. For example, here's a quick demo I set up with flexbox based on your description of 2 colums with the right column being 85% and centered content: https://codepen.io/gizmola/pen/XWLpage Quote Link to comment https://forums.phpfreaks.com/topic/322520-can-you-center-a-div-on-mobile-that-is-float-right/#findComment-1631229 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.