I am trying to make a basic website, used to mess around with HTML 15 years ago when the internet first came out and I like a challenge! I used site publisher to make a template with bootlace as the CSS, and just started playing around from there. Don’t really know what I am doing but managed to get what I need, apart from two issues:
On a PC the images down the bottom are a bit large for my liking, I know how to size an image with the basic img src command but it seems to mess up the view on mobile, so I copied what was in the template command :
added a width and height but doesn’t seem to do anything.
Also, when viewing the site on mobile, everything looks good apart from the top of the page is not visible, ie. will not scroll up there sort of thing.
I’m sure its simple, and would appreciate some help.
Yeah, but but you have to be careful about messing with frameworks. I assume you’re using Bootcrap Bootstrap? In stead of setting fixed widths on the images, you could set a max-width to, say, 70%, but target only large screens. (I’m not proficient with working with frameworks, though.)
Make sure to optimize those images, though, as their file size is way to big for the web.
I don’t see the problem you’re describing on mobile, although there is a slight sideways scroll, possibly from some excessive padding. EDIT: it seems to be because of having one .row div nested inside another.
It’s easy in CSS, but with Bootstrap, it’s best to read their docs to understand how their system works. If you mess with the actual BS code, it can cause side effects, so one has to be careful.
I updated my first post at the end with a note about nesting one .row div inside another. Probably isn’t what BS intends, and causes a bit of ugly sideways scroll on a mobile screen.
Yes you can’t nest rows directly inside another row they need to be inside the appropriate ‘col-’ class. Rows have 15px negative horizontal margins and the columns have 15px horizontal padding to fill that gutter so that rows nested in a column do not go outside the parent container.
Also content inside rows need to be in the appropriate column structure. If you want to dip out of bootstrap for some small piece of code then don’t use rows and columns but use your own code instead.
When using a framework stick to the framework rules but there’s no reason you can’t code sections freehand but then don’t use or modify the framework classes directly.
