Support » Themes and Templates » fluid width

  • Resolved jonwainwright

    (@jonwainwright)


    Hi im new to this hope im in the right place i am currently redesigning my site and trying to make it more original.

    I am trying to make my site full width with no background image (if that is possible). im not sure how to do this can anyone else.

    (i am a novice when it come to PHP/CSS/HTML)

    i have created a child theme i think oh im using the pinboard theme

    website is http://www.motortrader-insurance.com

    Thanks for any help

Viewing 8 replies - 1 through 8 (of 8 total)
  • Christine Rondeau

    (@crondeau)

    Volunteer Forum Moderator

    If you look in the style.css of the parent theme ( wich is indeed pinboard ) you’ll find this on line #601 :

    #wrapper {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    box-shadow: 0 0 18px rgba(0, 0, 0, .4);
    background: #f8f8f8;
    overflow: hidden;
    }

    If you remove the max-width, then the site will take up the whole screen. Please do keep in mind that on very large monitors, your site may look really wide.

    could i just add the ammeded code to my child themes style.css?? would it over ride the perent theme??

    esmi

    (@esmi)

    Forum Moderator

    Add the amended CSS to your child theme’s stylesheet.

    ive done that but its not changed??

    Sorry if im making this harder that its needs to be i added the above code to my child theme’s stylesheet but nothing happened

    oh i deleted the line regarding max width

    thanks for all the help but i still cant seem to get this right if you check the my site now its starting to take shape (sort of but i just need to get 2 blank border removed and i have tried the above suggestion any other idea. i also need to make the contect background transparant but thats another thread for later lol

    A child theme will inherit any of the parent CSS that you don’t overwrite, so you can’t just leave it blank. Include the max-width attribute, but set it to “none” and it will work.

    #wrapper {
    position: relative;
    max-width: none;
    margin: 0 auto;
    box-shadow: 0 0 18px rgba(0, 0, 0, .4);
    background: #f8f8f8;
    overflow: hidden;
    }

    thats perfect thank you so mych for your help every one. just need to make the content background transpaprent and a few other little things.

    Thank you cheers everyone

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘fluid width’ is closed to new replies.