How to make a custom widget mobile responsive Outreach Pro

[Becky Lundin]

I created a full width custom widget for the home page on Outreach Pro, between the Home Top and Home Bottom.

How do I code it to make it mobile responsive?

Thanks so much!
Becky

[Lauren @ OnceCoupled]

If you don't remember what class(es) you gave your widget area, use your browser's inspector to find that. Add that to your media queries section and change the width to something like 100% (depending on how your site is set up).

If you need more help, you can post your site link and someone may be kind enough to get more specific. 🙂

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Becky Lundin]

Hi Lauren. I don't know what I am supposed to add to the media queries or where within that section.

I can't show the site because I only have it live when I'm working on it. I'm building it behind an existing html site.

I added the following code to the Theme functions page:

genesis_register_sidebar( array(
'id' => 'extra-home-bottom',
'name' => __( 'Extra - Home - Bottom', 'custom' ),
'description' => __( 'This is the extra bottom section of the Home page.', 'custom' ),
) );

I added this code to the front page php:

//* Add extra home bottom widgets
add_action( 'genesis_before_footer', 'outreach_extra_home_bottom_widgets', 1 );

function outreach_extra_home_bottom_widgets() {

genesis_widget_area( 'extra-home-bottom', array(
'before' => '<div class="extra-home-bottom widget-area">',
'after' => '</div>',
) );

}

And this is the code I put in the style sheet:

.extra-home-bottom {
background-color: #D5D0CF;
padding-top: 20px;
}

.extra-home-bottom .widget {
width: 1140px;
margin: 0 auto;
}

Any help greatly appreciated!
Becky

[Lauren @ OnceCoupled]

Hey Becky, at the bottom of your stylesheet you should have a bunch of media queries, designated by @media. They'll tell your content to change based on the size of the browser. Inside the appropriate screen size, add something to the effect of:

.extra-home-bottom .widget {
     width: 100%;
}

You may have to google "css media queries" and read a little bit on them to fully understand what's happening. 🙂

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Becky Lundin]

Hey Lauren you ROCK! 🙂 🙂 🙂

That worked perfectly!

Thank you so much. 🙂 🙂 🙂

Now I can get on with the rest of the site.

Becky

[Lauren @ OnceCoupled]

Happy to hear!

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Author]

Posts