Responsive Welcome Widget with Call-To-Action Button

Community Forums Forums Design Tips and Tricks Responsive Welcome Widget with Call-To-Action Button

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  AC 2 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #32667

    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?

    Thanks in advance!

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



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

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

You must be logged in to reply to this topic.