Widgets mixup on frontpage

[[email protected]]

Hi

I have a question in regards to fixing my website to be responsive. I have added some new widgets on the front page and they are looking fine when I load the site on a desktop. But when I access the site on a mobile device, widgets get mixed up.

This is from my functions.php:

genesis_register_sidebar( array(
'id' => 'home-featured-1',
'name' => __( 'Home Featured 1', 'minimum' ),
'description' => __( 'This is the home featured 1 section.', 'minimum' ),
) );
genesis_register_sidebar( array(
'id' => 'home-featured-2',
'name' => __( 'Home Featured 2', 'minimum' ),
'description' => __( 'This is the home featured 2 section.', 'minimum' ),
) );
genesis_register_sidebar( array(
'id' => 'home-featured-3',
'name' => __( 'Home Featured 3', 'minimum' ),
'description' => __( 'This is the home featured 3 section.', 'minimum' ),
) );
genesis_register_sidebar( array(
'id' => 'home-featured-4',
'name' => __( 'Home Featured 4', 'minimum' ),
'description' => __( 'This is the home featured 4 section.', 'minimum' ),
) );

This is from my style.css:

.home-featured {
/*border-bottom: 5px solid #f5f5f5;*/
margin-bottom: 0px;
padding: 40px 0;
}

.home-featured li {
list-style-type: none;
}

.home-featured .widget {
padding: 0 20px;
}

.home-featured p:last-child {
padding: 0 0 24px;
}

.home-featured-1 {
float: left;
text-align: center;
width: 25%;
}

.home-featured-2 {
float: left;
text-align: left;
width: 100%;
margin-top: -30px;
}

.home-featured-2 img {
padding-right: 15px;
padding-bottom: 15px;
padding-top: 10px;
float: left;
margin: 0px 15px 15px 0px;
}

.home-featured-3,
.home-featured-4 {
float: left;
width: 100%;
text-align: left;
margin-top: 10px;
}
.home-featured-3 .widget,
.home-featured-4 .widget {
width: 50%;
float: left;
}

Let me know if you know how to crack this one.

http://ulrikchristensen.com

[Victor Font]

You have to add CSS to the site's media queries for mobile responsiveness. Somewhere in the media queries you have to change the width to 100% so they stack above each other instead of being displayed in columns.

---

Regards,

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

[[email protected]]

Hi Victor

That really helped. But if you could help with the widgets also. They still do not stack on top of each other.

Best Regards,
Ulrik Christensen

[Victor Font]

You still have the widgets set for 50% width. Change this to 100% in your media queries.

---

Regards,

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

[[email protected]]

Hi Victor

I have this piece of code in my style.css:

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

.home-featured-1,
.home-featured-2,
.home-featured-3,
.home-featured-4 {
width: 100%;
}

Shouldn't this be enough.

/Ulrik

[Victor Font]

Your CSS classes in the media query have to match the CSS classes that set the dimension in the first place. The classes that set the widgets to 50% are

.home-featured-3 .widget,
.home-featured-4 .widget

It's necessary to add these classes as written to the media query.

---

Regards,

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

[[email protected]]

Hi Victor

I just added the classes. It all works great.

Thank you for your help.

All the best,
Ulrik

[Author]

Posts