Community Forums › Forums › Archived Forums › General Discussion › Column Classes stack right column on top of the left column on mobile
Tagged: column classes
- This topic has 3 replies, 2 voices, and was last updated 7 years, 2 months ago by Caroline Twist.
-
AuthorPosts
-
February 4, 2017 at 3:26 pm #200572Caroline TwistMember
Is there a way to have .one-half column class stack right column on top of the left column on mobile view? Inherently it stacks the left column on top of the right column.
This is the way the classes behave now:
<div class="one-half first">This is on the left on desktop, and on top on mobile</div>
<div class="one-half">This is on the right on desktop and on the bottom on mobile</div>
<div class="clearfix"></div>This is the way i want them to behave:
<div class="one-half first">This is on the LEFT on desktop, and on BOTTOM on mobile</div>
<div class="one-half">This is on the RIGHT on desktop and on the TOP on mobile</div>
<div class="clearfix"></div>Appreciate any tips!
Thanks!
February 4, 2017 at 3:39 pm #200574Victor FontModeratorThe order of items is controlled by the document object model (DOM). The DOM is created when the page loads in the browser. You can adjust positioning with CSS, but doing what you want would require a lot of trial and error. You can also move the content around with jQuery, but again it would be difficult. You'd have to test for the type of device, screen width, etc.. It's could take a lot of coding.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?February 4, 2017 at 4:14 pm #200576Caroline TwistMemberOkay, thanks Victor!
February 5, 2017 at 1:00 pm #200595Caroline TwistMemberI'm realizing that maybe I didn't as the right question. Anyway, I wanted to follow-up that I found a solution through the suggestion from someone in another forum, in case it is helpful for others.
She said:
"You wound need to use Custom CSS.
Basically you would need to change the order of the HTML div containers, so that the one you want on top (in mobile) is coded first.
Then create CSS so that the two divs float:right; at 50%. On mobile change the div to float:none;"I used the Genesis Columns Advanced plugin which lets me use shortcodes in the visual page and post editor which makes it easier for me to keep track of things, but more importantly, it lets me apply CSS classes to column classes. So I named .one-half column class .responsive-align-right
Here's the HTML:
[one-half-first class="responsive-align-right"]
Content I want on the right in desktop, but on the top in mobile.
[/one-half-first]
[one-half class="responsive-align-right"]
Content I want on the left in desktop, but on the right in mobile.
[/one-half]
[clearfix]Here's the CSS:
.responsive-align-right{
float: right !important;}
@media only screen and (max-width:800px) {
.responsive-align-right {
width: 50% !important;}
}
@media only screen and (max-width:414px) {
.responsive-align-right {
width: 100% !important;
float: none !important;}
} -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.