plugins break my css

[sladepowers]

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.

[Shikkediel]

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

[sladepowers]

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.

[Shikkediel]

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…

[sladepowers]

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

[Shikkediel]

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

:-)

[sladepowers]

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.

[Shikkediel]

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.

[sladepowers]

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

[Shikkediel]

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.

[Author]

Posts