As shown when viewed on phone devices the images ‘‘sticks out’’ to the right. How do I position the image so it is more to the left and hence, there is no scrollbar on the bottom of the page?
As shown the navbar is ‘‘cut off’’ from the first section which results in a white bar which is unappealing.How do I remove this white bar?
Any pointers would be greatly appreciated thank you. SOrry that I needed to triple post - since I am new here I can only send one image per post. My codepen name is JoyFulCoding which has all of my code for this
First issue happens because there is set width give to either image or its container. Remove that width and and make your image scalable. You can try giving the img width: 100% and height: auto;
2nd issue. By default, ul elements have margins. Give your ul margin:0; it will remove the white space.
Unfortunately first issue still persists and there has been no set width to container or image. I have tried giving img: width:100% and height:auto but again the problem still persists…
Have updated my codepen with what I have done so far. Recently completed the footer and get in touch sections all fine bar media queries.
Struggling to create a collapsible menu on the top too. So far, I have it so when you click on the three lines button it shows the navbar as a list but even when it is NOT shown, the space is still taken up by empty space.
You should use media queries. Your fonts look too big on mobile devices. Once the element sizes scale down to fit current device screen sizes it will look better.
For example.
your send enquiry button stretches because side padding size stretches over the screen width of mobile devices. This is where responsive design comes in.
Also using absolute position for contact info is not a good idea in this case. Position them naturally in the flow without using absolute positioning. It will mess you up more in smaller screen.
For your menus,
why are you giving opacity:0? it’s invisible.
You want to create a hover effect using :hover selector to change its color and background color.
Chose 33% width because we want three boxes in the first row and then another 3 boxes in the second row via flex wrap: wrap but this isn’t working as intended