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  Anita 1 year, 4 months ago.

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

    Jami Howard Mays
    Post count: 44

    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


    Post count: 7484

    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.

    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: | Tweet Me!

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

You must be logged in to reply to this topic.