Mobile Responsiveness in Executive Pro CTA Widget

[jeepkid99]

Hello!

We're working on a demo and can't get the Call to Action widget to be mobile responsive. We only modified the size of the CTA to display from 100% width, to 40% width. Website demo is posted on is: http://rusteration.com

When on a desktop, it looks great, but when viewed on a mobile device, the CTA (black box) stays non-responsive. I've reviewed the code and can get it to be mobile responsive, but then it pulls up on mobile, it stays at 40% and does not move down to a single column. Any suggestions would be GREATLY appreciated! I've included a couple snippets of our code (where we switched to 40% and our mobile responsive behavior area below that.

(code switched to 40%)
.executive-pro-home .home-cta {
background-color: #222;
color: #ddd;
float: left;
padding: 60px;
padding: 6rem;
width: 40%
}
.executive-pro-home .home-cta p {
color: #ddd;

(Mobile Responsive code)

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

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

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

}

.executive-pro-home .home-cta {
float: right;
background-color: #222;
color: #ddd;
padding: 60px;
padding: 6rem;
width: 40%;
}

.executive-pro-home .home-slider {
float: left;
width: 60%;
}

.executive-pro-home .home-cta .one-fourth {
width: 30%;
padding-top: 80px;
float: right;
}

.home-cta a.button {
float: right;
}

http://rusteration.com

[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%

[emasai]

You have to tweak your media queries according to the size of the mobile model. Mobile phones will need the slider and CTA to be separated. For mobile phone I would do this:
On line 2344 remove padding: 6rem; and width: 40%. The CTA will then appear under the slider. For the slider line 2357 remove the width: 60%;
You can still keep 60% 40% for different mobile resolutions.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[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.

[emasai]

Even if you leave it at 60/40, the text is not going to reduce in size unless you reduce the font size, which in some cases will make it illegible. You really need to sort out at what size you want it to go full width instead of 60/40

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[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?

[emasai]

Then you need to modify your media queries to display 100% width for both of them. That way they will stack.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[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?

[emasai]

Do you have a web inspector like Firebug? If not you need to download one. That way you can identify which items are affected in your css. See this recent article from Brad that explains it http://wpsites.net/web-design/find-test-modify-the-css-in-your-themes-style-css-file/

There are lots of mobile devices with lots of different widths. Your stylesheet has the basics, you need to identify which ones you need to modify so that when the browser width is smaller the display changes. It's not evident for a beginner, you only need to rewrite new rules for the element which has to change.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[sacousino]

I've been trying to figure this out myself and I'm just not getting it. I notice the OP was able to get it worked out - help, please?

http://www.PersonalizedBritain.com

Thanks.

[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!

[sacousino]

Ah, that's a bummer! But thanks on the tip for MotoPress. It's worth checking into.

[Author]

Posts