Reorder widget areas on mobile

[[email protected]]

I am using News Pro. Mobile devices display the “home-middle-left” widget area first, then “home-middle-right.” I would like to reverse this order on mobile devices. Any suggestions?

Steve
atomikpop.com

http://atomikpop.com

[Victor Font]

In the media query that applies to the mobile size you are targeting, reverse the floats for the two areas. .home-middle-left defaults to float: left; and .home-middle-right defaults to float: right;

Change this so .home-middle-left is float: right; and .home-middle-right is float: left;

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[[email protected]]

Thanks, Victor. This is set in style.css?

Steve

[Victor Font]

Yes.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[[email protected]]

Victor, my media quert does not mention float (original code is below). Should I add the following? Also, what do the fist 20 lines below do?

}

.home-middle-left {
border: none;
float: right
}

.home-middle-right {
border: none;
float: left
}

I appreciate your time,

Steve

--- Original Code Below ---

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

.five-sixths,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.footer-widgets-4,
.footer-widgets-5,
.footer-widgets-6,
.four-sixths,
.home-middle-left,
.home-middle-right,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}

.content #genesis-responsive-slider .flex-direction-nav li .next,
.content #genesis-responsive-slider .flex-direction-nav li .prev,
.content .slide-excerpt {
display: none;
}

.home-middle-left {
border: none;
}

.header-image .site-header .site-title a {
background-size: contain !important;
}

.entry-title {
font-size: 26px;
font-size: 2.6rem;
}

}

[[email protected]]

Changing the float reversed the order on screens that could display two columns; however, on smaller screens the home-middle-left widget always displayed before (on top) before the home-middle-right widget.

I solved this by going into front-page.php and reversing the positions of the home-middle-left and home-middle-right widgets. Now, the home-middle-right widget displays first on smaller mobile devices.

Thanks,

Steve

[Author]

Posts