Featured home widget box not responsive

Community Forums Forums Design Tips and Tricks Featured home widget box not responsive

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  Sachin Verma 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #102874

    Pavle
    Member
    Post count: 110

    Hi guys,

    I followed this great tutorial by Brad http://wpsites.net/web-design/feature-box-genesis-home-page/
    and now I have nicely looking featured home page widget.
    However it is not responsive.

    Here is the code I used to style its css, but I am unsure how to make it responsive? Do I need 2 widgets one for text one for form to make it responsive ?
    `#enews-ext-5 {
    float: right;
    width: 30%;
    }

    #text-1h4 {
    color: #FFFFFF;
    font-size: 18px;
    }

    #text-12 {
    float: left;
    font-size: 16px;
    width: 65%;

    Any tips on this one?

    Here is my site http://bit.ly/1fzRUDM

    http://bit.ly/1fzRUDM
    #102875

    Sachin Verma
    Member
    Post count: 31
    .featured-box {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background-color: #21759B;
    color: #fff;
    border: 2px solid #ddd;
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px;
    width: 1020px;
    }

    If you change “width” to “max-width”, the box will become responsive, but you also might need to make changes to the button size/padding/margins etc. for small screen devices.


    Genesis child themes, websites and services.
    My site //Bitdoz.com Follow me on //Twitter

    #102876

    Pavle
    Member
    Post count: 110

    Hey Sachin, thanks so much man!

    Any idea how I can change the button size padding and margins? Do I need to edit it in same css, or create a call only for mobile devices? Sorry I am terrible at css.

    #102877

    Sachin Verma
    Member
    Post count: 31

    max-width: 1020px; I meant this actually.
    I checked your site, it looks fine above ~500px width, I don’t think anyone use devices below that resolutions now. There is a nice tutorial on Studiopress on Media queries, you can use it to style CSS for lower resolutions if you want.


    Genesis child themes, websites and services.
    My site //Bitdoz.com Follow me on //Twitter

    #102878

    Pavle
    Member
    Post count: 110

    Hi Sachin,

    I just did what you told me and it looks just as I wanted.
    I will need to style it a bit and perhaps add some widgets bellow it, such as recent posts, latest videos, twitter posts,etc.

    Still a lots of things to be done.
    Your site looks beautiful by the way, congratulations. I just started building mine with 0 css or coding knowledge, it will be a long ride.

    #102879

    Sachin Verma
    Member
    Post count: 31

    Good luck with your site, hope you build a beautiful site and thanks for appreciation. :)


    Genesis child themes, websites and services.
    My site //Bitdoz.com Follow me on //Twitter

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

You must be logged in to reply to this topic.