Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to make a custom widget mobile responsive Outreach Pro
Tagged: mobile responsive widget, Outreach Pro
- This topic has 5 replies, 2 voices, and was last updated 10 years ago by Lauren @ OnceCoupled.
-
AuthorPosts
-
April 22, 2014 at 2:12 am #101813Becky LundinParticipant
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!
BeckyApril 22, 2014 at 7:03 am #101836Lauren @ OnceCoupledMemberIf 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
April 22, 2014 at 11:54 am #101900Becky LundinParticipantHi 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!
BeckyApril 22, 2014 at 6:16 pm #101968Lauren @ OnceCoupledMemberHey 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
April 22, 2014 at 6:39 pm #101972Becky LundinParticipantHey Lauren you ROCK! 🙂 🙂 🙂
That worked perfectly!
Thank you so much. 🙂 🙂 🙂
Now I can get on with the rest of the site.
Becky
April 22, 2014 at 6:44 pm #101976Lauren @ OnceCoupledMemberHappy to hear!
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.