Prose – Make Custom Feature Box Responsive

[nubloggie]

I've added a feature box to my site by adding the following code (i'm a php and css noob btw...followed some snippets i found..) My question is - how can i make it mobile responsive?

CUSTOM FUNCTIONS
genesis_register_sidebar( array(
    'id' => 'featured-box',
    'name' => __( 'Featured Box', 'child' ),
    'description' => __( 'This is the featured box.', 'child' ),
) );
/**
* @author Brad Dalton - WP Sites
* @learn more http://wpsites.net/web-design/feature-box-genesis-home-page/
*/
add_action( 'genesis_after_header', 'genesis_featured_box' );
function genesis_featured_box() {
if ( is_front_page() && is_active_sidebar( 'featured-box' ) ) {
    echo '<div class="featured-box">';
    dynamic_sidebar( 'featured-box' );
    echo '</div><!-- end .featured-box -->';

CUSTOM CSS
.featured-box {
	
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background-color: #00;
    color: #0;
    border: 2px solid #ddd;
    border-radius: 10px;
	margin: 0 auto;
	width: 870px;

    overflow: hidden;
    padding: 20px;
 }

.featured-box h4 {
    font-size: 20px;
    color: #0000;
}

.featured-box p {
    padding: 0 0 20px;
}

.featured-box ul {
    margin: 0 0 20px;
}

.featured-box ul li {
    list-style-type: disc;
    margin: 0 0 0 30px;
    padding: 0;
}

.featured-box .enews p {
    padding: 0 0 10px;
00
}

.featured-box .enews #subscribe {
    padding: 0;
}

.featured-box .enews #subbox {
    background-color: #fff;
    margin: 0;
}

.featured-box .enews input[type="submit"] { 
background-color: #FF7530;
	-webkit-border-radius: 4px 4px 4px 4px;
	border-radius: 4px 4px 4px 4px;
;
}

Thanks in advance for your help!

http://WWW.LIVINGAHA.COM

[Marcy]

You will want to use a % for the width instead of a pixel width. Try this for width on .featured-box.
Change the current width to max-width and add a new width. I have 100% to try first, but you may need to reduce this to 95% or something else, depending on which section you have this in. For more precise help, we would need a link to your site.

.featured-box {
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background-color: #00;
    color: #0;
    border: 2px solid #ddd;
    border-radius: 10px;
	margin: 0 auto;
	max-width: 870px;
        width: 100%;
    overflow: hidden;
    padding: 20px;
 }

---

Marcy | Amethyst Website Design | Twitter

[nubloggie]

Marcy, you are amazing! That worked!! Down to %85 and it displays perfectly on my phone 🙂

May I ask you another one?

I moved my primary nav bar above the header and got it placed where i want it. Again though, i'm haveing a "responsive" problem and the nave bar does not display on small, mobile screens.... Any idea hwo to fix that?
The site is http://www.livingaha.com
Thanks so much again for your help Marcy!`CUSTOM CSS
/** reposition header above main wrap css */

#nav {
position:relative;
left:370px;

width: 150px;
-webkit-border-radius: 0px 0px 30px 5px;
border-radius: 0px 0px 30px 5px;

}
body {
width: 100%;
} <code></code>CUSTOM FUNCTIONS
<?php
/** Do not remove this line. Edit functions below. */

/** Move primary nav menu
remove_action( 'genesis_before_header', 'genesis_do_nav' );
add_action( 'genesis_before', 'genesis_do_nav' );
*/`

[nubloggie]

You know what Marcy, I played with some %'s instead of pixels and i got the nav working too!
Thanks again for your help!

[Marcy]

You're welcome! And way to go working out the %! 🙂

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts