Added additional widget areas, now responsiveness is broken

Tagged: footer, responsive, welcome, widget

This topic has 11 replies, 2 voices, and was last updated 10 years, 10 months ago by Eric.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
December 2, 2013 at 3:32 pm #9261
serenae
Customer
Perhaps this is very simple, but I have no idea how to fix it. I added two additional widget areas-
Welcome Widget 4 and Footer 4 Widget because I wanted four widgets in each of those sections rather than three.

Looks fine on the computer, but the widgets overlap (instead of lining up vertically) when viewed at a smaller size (tablet, phone, resized browser window). Does anybody know how I can fix this issue? Thanks!

LINK: loveoffrench.org
December 2, 2013 at 8:22 pm #9273
Eric
Customer
I can see that there is some custom css that you added, and that is what is overriding this part of your css –
```
	.welcome-feature-1, 
	.welcome-feature-2,
	.welcome-feature-3,
	.home-feature-1,
	.home-feature-2,
	.home-feature-3,
	.home-feature-4,
	.home-feature-1,
	.home-feature-2,
	.home-feature-3,
	.home-feature-4,
	.home-feature-5,
	.home-feature-6,
	.home-feature-7,
	.home-feature-8,
	.home-feature-9,
	.home-feature-10,
	.home-feature-11,
	.home-feature-12,
	.home-feature-13,
	.home-feature-14 {
	    margin: 0 auto;
	    text-align: center;
	    width: 100%;
	}
```
Here is the css that you added –
```
.welcome-feature-1, 
.welcome-feature-2, 
.welcome-feature-3 {
    float: left;
    margin: 0;
    width: 25%;
}
```
Once I remove the css above, it works.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
December 2, 2013 at 8:24 pm #9274
serenae
Customer
If I remove that custom CSS, then the four welcome widgets aren’t lined up anymore. Is there a way to keep them all in line on the larger screen but responsive for smaller displays?
December 2, 2013 at 8:30 pm #9277
Eric
Customer
Yeah it supposed to work the way you have it, but for some reason your custom css is overriding the main css. How did you add that css? Is it a file, or from the Genesis Theme Settings….or a plugin?

Maybe if you add !important to the responsive section it will have priority when in mobile view……You don’t usually have to do this, but it could be a quick solution that will get the job done if you don’t have much time.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
December 2, 2013 at 8:42 pm #9280
Eric
Customer
Yep that works (see my recent comment). Also, you’ll need to add it to the footer area of your responsive css around line 4008. Looks like this –
```
.home-feature-3, .home-feature-4, .home-bottom-sidebar-1, .home-bottom-sidebar-2, .home-bottom-sidebar-3, .home-bottom-sidebar-4, .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .five-sixths, .four-fifths, .four-sixths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fifths, .three-fourths, .three-sixths, .two-fifths, .two-fourths, .two-sixths, .two-thirds {
    margin: 0;
    width: 100% !important;
}
```
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
December 2, 2013 at 8:44 pm #9281
serenae
Customer
Ah, I’ll give that a shot. I’ve been adding my css through the ‘custom css’ feature of Jetpack, since I didn’t want to go through the hassle of updating the CSS every time the theme is updated.
December 2, 2013 at 8:44 pm #9282
Eric
Customer
and you’ll also need to add some css for the 4th welcome widget area since it will show up off and to the right. So doing this will fix it for the responsive area –
```
.welcome-feature-4 {
    float: left;
    width: 100%;
}
```
The other welcome widgets float left and are at 100%, so that’s why you would need to do it for this one as well.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
December 2, 2013 at 8:46 pm #9283
Eric
Customer
Yeah using custom css is recommended in case of updates. Just let me know if it works when you give it a try.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
December 2, 2013 at 9:57 pm #9292
serenae
Customer
Okay, so I added the !important tags to the original CSS file in the places you specified, which made a big difference, but when I modify welcome feature 4 like this
```
.welcome-feature-4 {
    float: left;
    width: 100%;
}
```
it just moved that entire block to the next line. Did I miss something? Thanks!
December 3, 2013 at 11:24 am #9304
Eric
Customer
The .welcome-feature-4 code is for the responsive area, not the main/desktop part of the css. You can leave it how you had it, but you’ll need to add that code into your responsive section in order for it to work on both desktop/mobile.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
December 3, 2013 at 2:17 pm #9309
serenae
Customer
That worked wonderfully, thank you!
December 3, 2013 at 9:04 pm #9313
Eric
Customer
You’re Welcome

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Added additional widget areas, now responsiveness is broken’ is closed to new replies.