Building a one page website please review what's been done so far

I am trying to create the website shown in the image below:

So far, I have done the following on codepen my username is JoyFulCoding (can’t add links to posts atm unfortunately so sorry about that)

Edit: Links now allowed so please see what I have done so far here:

https://codepen.io/JoyFulCoding/pen/EzWyKv

The first issue I am having atm is as below:

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?

Second issue:

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.

1 Like

Thank you so much such a simple fix for issue 2!

https://codepen.io/JoyFulCoding/pen/EzWyKv

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…

Can you verify your email address? I want to take a closer look.

The owner of this Pen needs to verify their email address to enable Full Page View.

1 Like

My bad, it is verified now.

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.

https://codepen.io/JoyFulCoding/pen/EzWyKv

For reference the collapsible menu should look like this:

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.

2 Likes

Thank you. I’m going to deal with media queries and responsive design after getting the basics done.

In regards to the first issue mentioned where the image goes offscreen how would I deal with this?

I managed to get a collapsible menu now

https://codepen.io/JoyFulCoding/pen/EzWyKv

You need to match the colors. ColorZilla is a great free tool for this.

1 Like

Thanks for this, CodeZilla worked like a charm.

I’m nearly done just need to create the 6 sections with different colours part…

Can anyone advise on how to begin with this part as I see it as the hardest part of the project?

Break everything down into parts, like boxe/ divs. That is all html is, boxes inside of boxes.

Then you flexbox to align things.

Trying my best to split a section into 6 parts as below:

<section id="container-parent">
     <div>
      </div>
      <div>
      </div>
      
      <div>
      </div>
      
      <div>
      </div>
      
      <div>
      </div>
      
      <div>
      </div>
</section>
      

#container-parent {
  display:flex;
  flex-direction:row;
  background-color:red;
flex-wrap:wrap;
}

.container-parent > div{
  background-color:blue;
  width:33%;
  text-align:center;
}

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

Managed to get the 6 boxes set up…

Issue now is that the text will not show in the center of each box. I though justify-items:center and align-items:center would have resolved this?

Please advise on

https://codepen.io/JoyFulCoding/pen/EzWyKv