[jeepkid99]

Couple things you need to do:
1. Access your CSS file for the theme and search for: home-middle.
2. Find:.home-middle .widget {
float: left;
padding: 0 20px;
text-align: center;
width: 33%;

Change to: .home-middle .widget {
float: left;
padding: 0 20px;
text-align: center;
width: 24%;

3. Find: .home-middle .widget:nth-of-type(3n+1) {
clear: both;
change this to: .home-middle .widget:nth-of-type(4n+1) {
clear: both;

4. Clear browser cache

[jeepkid99]

Resolved. I added this under the .main-image area:

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

.main-image img {
vertical-align: top;
width: 100%;
margin-top: 0px;

[jeepkid99]

That's brilliant. I just cut/pasted my desktop styles and put them above the media queries. Voila! I can't tell you how long I've been doing that! You're the first person to point it out. Really appreciate your help. Sent you a few coffees. 🙂

Thanks again.

[jeepkid99]

Hi Christoph!
Thanks for trying to help. I added that, but unfortunately, it didn't change anything. Any other suggestions? I tried

.welcome-text {
padding-top: 0;
}

&

.welcome-text {
padding-top: 0px;
}

[jeepkid99]

To be honest, I never was able to get this to work, so changed up the design slightly and used the Agency Pro theme which is similar and allowed for better customization based off of my clients needs. Every time I fiddled with one padding area, it threw off another on this theme. Not sure why. Best of luck, wish I had an answer for you about this one! I would recommend starting a new thread with your description of the exact problem you're having. It would be more likely to get answered in a fresh tread.

[jeepkid99]

I uploaded a screenshot to the site as I wasn't sure how to add one here. Thaks for the help!

http://rusteration.com/help/

[jeepkid99]

Thanks Johann! I had a background on the first portion of the first portion, but not the second! Adding to the second line fixed the issue. Thanks so much! For others running into this issue, here is what it ended up looking like:

Site Navigation
---------------------------------------------------------------------------------------------------- */

.genesis-nav-menu {
background-color: #efefef;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
clear: both;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.5;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}

.genesis-nav-menu .menu-item {
display: inline-block;
background-color: #001a4c;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 0px solid #800000;
text-align: left;
}

[jeepkid99]

One more quick one since I've got you on the line:)

If you look back at the header right widget area, you will see a large gap at the bottom again below the phone number. What controls this gap and how would I tighten it up like we did in Search?

Promise, that was my last question! You're very helpful!

-Taber

[jeepkid99]

You rock! I spent 2 hours looking for that little bit of code... Thank you, Julia! If you have time, can you explain to me what a "float" is?

[jeepkid99]

You know, we actually never did get this figured out. The demo link above has changed a few times since this post. We utilized a product called MotoPress to get this to work properly. Pretty great program for developers and dang inexpensive. The theme went all wonky on us when we tried the above "fix." So, we abandoned it and moved onto something else. Sorry I'm no help!

[jeepkid99]

I really hope I'm not being a bother to you!

So, I changed both to 100% and now the CTA is 100% on desktop (not 40%) and they stack on both the desktop as well as mobile.

Any other suggestions?

[jeepkid99]

Appreciate the help here!

When on desktop I want it to display as it does, 60% slider, 40% Call to Action.
When on mobile, I want it to do exactly what ever other widget does and simply stack onto single columns while remaining the same size. Is this not possible?

[jeepkid99]

This didn't quite work, but I think we're moving in the right direction.

If you look at the site, the slider is set to 60%, the CTA Widget is 40%. I'd like this to remain this way on a desktop. However, when you look at it on mobile, the CTA Widget remains at 40% of the screen while the slider scales down.

I'd like them to stack on top of one another, with the slider on top and 100% width of the mobile screen and the CTA below at 100% of the width of a mobile.

[jeepkid99]

Also, we want it to be 60% slider, 40% CTA widget across the top. So, we shrunk it down to 40% CTA and 60% slider. Slider remains responsive, CTA does if we reduce the size to 40%

[jeepkid99]

This fixed it! I set the margin to: 0 250px;

Thank you so much! It was driving me crazy!

[jeepkid99]

Thank you for your reply. This header that you're referring to was simply edited and moved over in our logo creation software. We would prefer to not have to do this, but just upload the logo normally. The logo that is currently there is uploaded as it would be normally.

If it helps, this occurred when we upgraded from Genesis 1.8.2 to the latest 2.0 versions.

[Author]

Posts