Responsive Welcome Widget with Call-To-Action Button

[Jami Howard Mays]

I'm working on a modified version of the Legacy Theme, a Genesis Community Theme. It comes with a Welcome Widget on the home page. I'd like to include a call-to-action button within the welcome widget, but I'm having issues with alignment + mobile responsiveness.

I've followed the steps on this post and have changed the style accordingly.

/* Color Buttons
------------------------------------------------------------ */

.cta-button {
color: #332012 !important;
padding: 5px 10px;
}

.cta-button:hover {
text-decoration: none;
}

.cta-button {
background-color: #97D2AE;
border: 1px solid #97D2AE;
}

.cta-button:hover {
background-color: #DAE19E;
border: 1px solid #DAE19E;
}

The issue I'm running into is that the main text in the welcome widget uses header text and only has a brief bit of text, so the CTA button aligns with the bottom of the text message. I've tried adjusting the margins/padding and have been unable to move it around at all.

So, I thought I'd go old-school and just use divs in the widget itself to generate columns, which looked better on a full screen, but didn't adjust on a mobile device nicely -- just kept the two columns and smooshed them so that they fit vertically, making them hard to read.

Is this a pipe dream? Can I use traditional divs AND make them responsive so that they adjust on top of one another on a mobile device?

http://4newgrowth.com/preview

Thanks in advance!

---

Jami Howard Mays, HBIC, Imaj Works | Athens, Georgia

[AnitaC]

You might want to post this message also over on the Appfinite.com support board. Wes, the developer is really good at responding quickly to things pertaining to his themes.

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts