I can get the whitespace right using margins/padding etc. without any problem but when I apply bootstrap classes to make it responsive using the grid it just looks horrifying. Am I supposed to put the paragraph and img into a div and use that div to make the responsiveness or put the classes straight into img and p tags?
On 900px wide screen it looks normal http://i.imgur.com/CWQNxoO.png because I made it on that width. (BTW the background image isn’t showing up on codepen for some reason)
I already made the website responsive using media queries which seems easier to me now lol, but bootstrap is required on codepen, it seems.
By “do not need bootstrap on codepen” you mean it doesn’t need the link leading to bootstrap in the head or…?
Now the background image from imgur is working for me.
There’s no need to put <head> tags in codepen, every link is managed differently there. You need to add thoses by clicking on the gear icon in any window. You need Bootstrap CSS, Jquery and Bootstrap.js for it to work. You can add them by cliking on the Quick add menu.
I don’t think you’re understanding me. It’s not about codepen. My websites aren’t responsive in Brackets, where I actually do them because it’s easier to go through code. That’s what I need help with.
I pasted the same code to pastebin so you can copy/paste it in actual editor like brackets or sublime then try to resize the window and see what I mean. I added col-lg, col-md, col-sm and col-xs but they don’t seem to work.
I understand you just fine Your question appear on here quite frequently and it’s important to understand what is needed for bootstrap to do it’s “magic”. The code you linked in your latest reply only include bootstrap.css. Both Jquery and Bootstrap.js are needed too !
But in CodePen, anything you would normally add to the head should be done in the settings. Click the gear icon in the upper left of the HTML, CSS, or JavaScript areas to access Pen Settings.
Under the HTML category, anything that should go into the head element should be added to the "Stuff for " area.
Under the CSS category, the “Add External CSS” section is where you add the Bootstrap CSS. You can click the “Quick-ad” menu at the bottom and choose Bootstrap from that list.
But you still need Jquery and Bootstrap.js. So go to the JavaScript category and add those using the “quick-ad” list at the bottom of that.
Bootstrap is working fine (you don’t need bootstrap’s JS or jQuery to use the Bootstrap css btw). The big margins on some of your elements is what’s causing you trouble. On smaller screens the margins are bigger than the column widths, causing the elements within to be pushed out of the cols.
You are also positioning items with position: relative and absolute which enables elements to slide over one another, which is probably not what you want here.
If you want to move stuff away from the side of the screen you could use bootstrap’s col-offset classes, or adjust the max-width of your #about-section.
You could even use two different containers for the header/main content, the non-fluid bootstrap containers are only 1170px wide. Just make sure you don’t nest them.
@Naqin The thing with position is I don’t know how else would I make my background image go into the background, behind the face shot and the paragraph. Yes the margins are big. I could try padding but I have the feeling it will be the same thing. They are big because spacing makes it look clean, just how I like it. I will see into that offset class and the max-width option.
@Liberafied I know about codepen having those. I also had bootstrap just not jquery. Didn’t know I needed it.
@Mizu sounds like I’m gonna become a warlock aswell as a web developer.
This is the entire thing, will add real projects once I have more of them and once I get done with the responsiveness part. Still not finished, gonna add few animations, real PHP (i hope) to send the email…
Placing your background as an HTML image means you have to make sure it’s 100% high and wide and you have to work to place all the other elements on top of it. This can be done, but it’s quite tricky. Way easier is to use CSS background on the section instead. It would also be semantically more correct, since it actually is a background.
If you want to keep the blur it’s a bit trickier, I’d put that on a pseudo-element in this case. But it might be best to stick to the basics at first. You could blur the image with Photoshop or some other image editing software.
Tried to use the css background property but had issues. I will do the blur with GIMP if even possible. I’m on linux so PS is very…problematic to use over playonlinux/wine.
Your question appear on here quite frequently and it’s important to understand what is needed for bootstrap to do it’s “magic”. The code you linked in your latest reply only include bootstrap.css. Both Jquery and Bootstrap.js are needed too !