Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS plugins break my css

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #206268
    sladepowers
    Participant

    Hello world. I am new at design and having a hard time getting my site show on all devices at 100% of the browser window. I Have 2 plugins on my home page that seem to break the css. The page has been set to 100% but still fails to fit on all screens, all devices.
    The site is sbhorizons.com

    Here is the CodePen link: http://codepen.io/anon/pen/yNwOOL

    Thanks so much.

    #206289
    Shikkediel
    Participant

    I don’t think it’s any of the scripts doing that but the CSS itself. The unsorted lists especially aren’t very responsive…

    #206291
    sladepowers
    Participant

    Thank you so much Shikkediel. What did you do so I can know how next time myself? Thanks. It seems to have upset the divs underneath.

    #206293
    Shikkediel
    Participant

    Glad to help out. With all JavaScript disabled on the page the issue still persisted so the next logical thing was to have a look at the CSS. I toggled the overflow: hidden on body with developer tools (right clicking a browser and choosing ‘inspect element’ opens a world of info) so I could scroll the page and noticed the list sticking out to the right…

    #206299
    sladepowers
    Participant

    Thanks so much. Now I’ve learned something. Thank you for teaching me to fish.

    #206300
    Shikkediel
    Participant

    Very welcome, most members don’t mind frying up a nice cod for others now and then either so stick around.

    :-)

    #206301
    sladepowers
    Participant

    Sounds good. I like this forum because you invited me to stay. Some other forums aren’t as cordial. Thanks again and I will stick around. I can learn here.

    If I may impose the css for the div at the bottom is now off. I’ve done what you said and disabled the .js but I can’t seem to get it. I tried to put the divs in a container and each to 100%. Still no surf. Please help one more time. I do make sure I pitch in too, so if when you and yours fry cod I’ll make sure I’m there. Very good, Sir.

    #206303
    Shikkediel
    Participant

    Looks like there’s a few things going on there. Many elements have margin and/or padding by default so I always like to reset this at the very start (but that may be a bit of a sidetrack) :

    *, *:before, *:after {
    margin: 0;
    padding: 0;
    }
    

    Then the h3 element in section.four is still under the influence of the float that was applied to the previous element, that would need to be cleared so it will be placed underneath the divs with the col class :

    section.four h3 {
    clear: left;
    }
    

    Now the other four colums will still not be fitting exactly inside the width of the screen but that’s because of the padding that was added. This will calculate the width of the columns including it :

    *, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    

    Disabling the JS isn’t really necessary by the way, that was just to check it it was causing the issue (since it’s not, it can be executed). Hope that helps.

    #206312
    sladepowers
    Participant

    I am still having a bit of trouble, but I’m working at it. The four columns still don’t set right in the div.

    I applied the code to the css but it didn’t seem to help much. So I’m posting the css for the page. Maybe you can give me some insight into what’s going wrong. I am baffled.

    http://codepen.io/sladepowers/pen/YXgVxa

    #206315
    Shikkediel
    Participant

    Yeah, it’s a challenge to make a responsive design from scratch for anyone. All elements down the tree have to be accounted for.

    Adding a background image won’t make it automatically fill up the space, it will initially show the image in it’s original dimensions. You can use background-size for this :

    #somediv {
    background-size: 100% 100%;
    }
    

    I’d remove the width: 99% from body and give the columns a width of 25%, seems easier. And box-sizing doesn’t really need any prefixed rules (like -moz-) anymore.

    Maybe you could be a bit more specific about what’s not working out? Already looks better than before…

    This could help to get a good grasp of the basics by the way :

    http://learnlayout.com/

    If you want to avoid the uphill learning curve of responsiveness, I’d recommend starting with a CSS framework like Bootstrap or Foundation as the basis.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.