Help! I am not getting my tribute page responsive!

HTML-CSS
#1

Hi,

I am really getting desperate. I made a main div and set its width to 100%. Also there are a three elements inside (header, article, aside), which I set to 70%. And I made a media querie for mobiles, which set the width for those elements to 100%. For some reason I can´t figure out, none of this is working and it looks like shit on mobile! :sob:

This is how the code looks like:

#main {
	width: 100%;
}



header, article, aside {
  width: 70%;
  margin: 3em auto;
  border: 1px solid #333;
  box-shadow: 5px 5px #333;
  background-color: floralwhite;
  padding: 2em 4em;
  }

Or the full project:

Do you see the reason?

Thanks a lot in advance!!!

Why isn't my tribute page responsive?
#2

@Marcella, some thing you can look at.
For the header, article, aside selectors (normal view and media query) there’s padding added to the set width size.

1 Like
#3

Thank you! Changed the html to box-sizing: border-box. Still not working :pensive:

#4

Now I set everything to border-box. Finally works :sweat_smile: Thanks a lot :kissing_heart: :two_hearts:

#5

Hi,

I am really getting desperate. I made a main div and set its width to 100%. Also, there are three elements inside (header, article, aside), which I set to 70%. And I made a media query for mobiles, which set the width for those elements to 100%. For some reason I can´t figure out, none of this is working and it looks like shit on mobile! :sob:

This is how the code looks like:

#main {
	width: 100%;
}



header, article, aside {
  width: 70%;
  margin: 3em auto;
  border: 1px solid #333;
  box-shadow: 5px 5px #333;
  background-color: floralwhite;
  padding: 2em 4em;
  }

Or the full project:

Do you see the reason?

Thanks a lot in advance!!!

#6

Hey @Marcella Your image is not responsive maybe that is the reason. Changing the width of just the div in which image is will not change the width of image itself set the width of #image to 100% and height to auto. And also maybe you should reduce the padding around h2 for small screen sizes.

1 Like
#7

It worked combined with box-sizing: border-box :sweat_smile: Thank you!

#8