HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Henry Brenton
Henry Brenton
9,187 Points

Header elements do not react as expected when screen size is transitioned from desktop to mobile - please advise!

Hello everyone,

When I transition my display from desktop to mobile, the elements such as the 'portfolio', 'about', and 'contact' do not stay in a line, and transition to being underneath the header elements - instead, they sort of squash up into two lines, one under the other on the right of the page, similarly to how they do for a brief moment in the video, when Nick is transitioning his screen from desktop to mobile, although, while his screen does it for a moment before they all transition to below the headers on his website, my elements just stay 'squashed up' on the right hand side of the page.

Also, I've noticed that because of this, I also don't get the dark green nav section below, as Nick's does, towards then end of the video.

Any ideas why this could be happening?

Many Thanks!

Henry

Hi, please add the code here so we can take a look at the problem

2 Answers

Henry Brenton
Henry Brenton
9,187 Points

Hello Joel, here is my 'responsive.css' code:

"@media screen and (min-width: 480px) {

/********************* TWO COLUMN LAYOUT **********************/

#primary { width: 50%; float: left; }

#secondary { width: 40%; float: right; }

/********************* PAGE: PORTFOLIO **********************/

#gallery li { width: 28.3333%; }

#gallery li:nth-child(4n) { clear: left; }

/********************* PAGE: ABOUT **********************/

.profile-photo { float: left; margin: 0 5% 80px 0; }

}

@media screen and (min-width: 660px) { /********************* HEADER STYLING **********************/

nav { background: none; float: right; font-size: 1.125em; margin-right: 5px; text-align: right; width: 45%; } }

logo{

float: left; margin-left: 5%; text-align: left; width: 45%; }

h1 { font-size: 2.5em; }

h2 { font-size: 0.825em; margin-bottom: 20px; }

header { border-bottom: 5px solid #9f009f; margin-bottom: 60px; }"

And this is my 'main.css' code:

"/********************* WEBSITE BODY COLOUR **********************/

body { background-color: #f92f3f; }

/******************** GENERAL STYLING *********************/

body { font-family: Rubik, sans-serif; }

a { text-decoration: none; }

wrapper {

max-width: 1040px; margin: 0 auto; padding: 0 5%; background: #e97e5f; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/******************** HEADER STYLING *********************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo{

text-align: center; margin: 0; }

h1 { font-family: 'Cookie', sans-serif; margin: 25px 0; font-size: 2.7em; font-weight: bold; line-height: 0.8em; }

h2 { font-family: 'Montserrat', sans-serif; margin: -7px 0 0; font-size: 0.8em; font-weight: normal; }

/************************* NAVIGATION STYLING *************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: bold; padding: 15px 10px; }

/************************** NAVIGATION COLOUR STYLING **************************/

a { color: #45f4ee; }

header { background: #3587ff; border-color: #83f993; }

h1, h2 { color: #f1f1f9; }

nav { background: #3587ff; }

nav a, nav a:visited { color: #efa1de; }

nav a.selected, nav a:hover { color: #43f599; }

/******************** FOOTER STYLING *********************/

footer { font-size: 0.87em; text-align: center; clear: both; padding: 73px; color: #98c3d1; }

.social-icon { width: 29px; height: 29px; margin: 7px 11px; }

/********************** PAGE: PORTFOLIO STYLING ***********************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #c799b5; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.97em; color: #751159; }

/******************** PAGE: ABOUT STYLING ********************/

.profile-photo{ display: block; max-width: 200px; margin: 0 auto 30px; border-radius: 100%; }

/********************** PAGE: CONTACT STYLING ***********************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 1.4em; }

.contact-info a { display: block; min-height: 23px; background-repeat: no-repeat; background-size: 29px 29px; padding: 0 0 0 31px; margin: 0 0 19px; }

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); }

/******************** WEBSITE BODY STYLING *********************/

body { background-color: #f92f3f; color: #43f599; }"

Apologies if that's difficult to read - many thanks!

Henry

'''CSS

@media screen and (min-width: 480px) {

/********************************** TWO COLUMN LAYOUT ***********************************/

#primary { width: 50%; float: left; }

#secondary { width: 40%; float: right; }

/********************************** PAGE: PORTFOLIO ***********************************/

#gallery li { width: 28.3333%; }

#gallery li:nth-child(4n) { clear: left; }

/********************************** PAGE: ABOUT ***********************************/

.profile-photo { float: left; margin: 0 5% 80px 0; }

}

@media screen and (min-width: 660px) {

/********************************** HEADER ***********************************/

nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }

h1 { font-size: 2.5em; }

h2 { font-size: 0.825em; margin-bottom: 20px; }

header { border-bottom: 5px solid #599a68; margin-bottom: 60px; }

} '''

Have you changed anything from the source code of the video? If so what did you adjust? You can try copy paste this to default responsive design and see how that works.

Henry Brenton
Henry Brenton
9,187 Points

Hello Joel, I'll have a look into that, I'm not sure that I made any changes to the source code, but I'll investigate that to be sure - just to confirm (I know it's a newbie question), whereabouts would the source code to the video be?

Thanks!

Henry

No worries, if you go to the video, just above the description/teachers note you can find a link to "download" press that and you will find the zip file to download with all the code the teacher is having.

/Joel