Prose – Make Custom Feature Box Responsive

Community Forums Forums Design Tips and Tricks Prose – Make Custom Feature Box Responsive

This topic is: resolved

This topic contains 4 replies, has 2 voices, and was last updated by  Marcy 9 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #48626

    nubloggie
    Participant
    Post count: 28

    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
    #50416

    Marcy
    Participant
    Post count: 276

    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;
     }

    #50594

    nubloggie
    Participant
    Post count: 28

    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' );
    */`

    • This reply was modified 9 months, 1 week ago by  nubloggie.
    • This reply was modified 9 months, 1 week ago by  nubloggie.
    • This reply was modified 9 months, 1 week ago by  nubloggie.
    • This reply was modified 9 months, 1 week ago by  nubloggie.
    #50597

    nubloggie
    Participant
    Post count: 28

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

    #50687

    Marcy
    Participant
    Post count: 276

    You’re welcome! And way to go working out the %! :)


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

The topic ‘Prose – Make Custom Feature Box Responsive’ is closed to new replies.