Hi all Campers,
this is my portfolio page:
I built it to some extent, though not attractive, but I have one big problem in my project which is the site is not responsive. by responsive, I mean if you open the website from say mobile phone, the page doesn’t shrink as supposed to be. if I write the project’s code in Notepad++, it is responsive but when I use the website on Codepen.io, it is not responsive.
Hope you got my point.
any help will be appreciated!
Check the settings in CodePen… you have Bootstrap being called twice… once in the html section where you have a link to Bootstrap 4 and again in the settings where you link Bootstrap 3.3.7. It looks like you’re mostly 3.3.7, so I suggest deleting the meta data and the link reference from your html section to use the once in your settings.
From there you’ll need to do some tweaking, but you need to make your images responsive… Look it up to see what I mean, but a max-width of 100% will help you with that.
Your page is “responsive”. As you can see, things shift around when you resize the browser.
The problem is, it’s not done correctly. Don’t get defensive yet.
The problem is you’ve hardcoded margins and paddings in your CSS… which may look fine when you’re previewing your site on a wide monitor… but these hardcoded margins and paddings will not work/or the values are not applicable anymore when your site is viewed using a different window dimension.
For example, on your logo you have a hardcoded padding-left: 150px;
A phone is only around 320px wide… right there, that padding is already eating a big chunk of your phone real estate.
If you need to use hardcoded values like this on a design (for tighter control of your layout), then you need to use @media-queries so you can also designate new/adjusted values for these hardcoded values on different size displays.
Here’s more info on media queries.
Your images need to have some classes too, otherwise, they remain a fixed dimension regardless of your browser/window size. See img and img-responsive bootstrap classes. You’re using V3 bootstrap, so this is the reference for it