Site will not adapt to phone

For some reason my site looks fine on browser and even while adjusting the dimensions on my desktop browser, however on my phone it seems to not adjust .

the navigation bar doesn’t adjust and cuts out the “contacts section”
and also in the middle of the page the sections converge into one another.

please help guide me to some solutions.

Thank you

Hey! i just checked out your code and here are a few suggestions.

  1. The first thing is to adjust the font size and the breakpoint set to change its font-size of the element with the id of #businessname because this is the main reason this is happening. Setting it to 900px seemed work for me but you can play around with different values.

@media (max-width: 900px) {
	.navbar {
		display: row;
		font-size: 1em;
		justify-content: space-around;
	}

	#businessname {
		display: none;
	}

  #form input, button {
  	margin: 0 auto;
  	margin-top: 4%;
  }
}

  1. The above would work for tablets but for mobile phones i would suggest you to implement a dropdown menu. if you only know HTML and CSS you can still implement it. Dev ed has an awesome video on that.

p.s you dont need to add the body tag in codepen yourself it is added automatically for you.

Hope this helped! :slight_smile:

1 Like

Man thanks so much.
I am going to work on that and will see how it works out.
Much appreciated… as I am pretty new…this has racked my brain for some time now.

haha don’t worry about it! we’ve all been there just remember to reach out for help whenever you have been stuck on a problem for a long time. A lot of people here would gladly help you. :wink:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.