Responsive design not working when screen is really small

1

My responsive design is working for the most part but my page starts to mess up in a few spots when I make the screen really small? could anyone tell me how I can fix this issue? Here is the link to the code pen project, https://codepen.io/zimmjoshua/pen/PjKrKb

Thanks for any information!

2

A couple things to look at:

The big one is your huge margins on the paragraph tag. They make the paragraph width too thin at small widths.

I’d recommend a media query to remove them on small screens.

The other thing I see is a whole lot of px. This measurement can’t change with screen size. You might try replacing some of them with variable width measurements like rem or em. Border-radius and border is usually okay as px, but anything that controls the visible width/height should be flexible. Or, you can write some media queries to change these too. :slight_smile:

1 Like
3

try this

add to

.retroshd {
  font-size: 10vw;
...
}

then change

#rcorners2 {
    border-radius: 2.5vw;
    border: 2px solid #000000;
    padding: 1vw;   
}

then add something like this to negate margins for small screens

@media (max-width:500px) {
  p {
    margin-left: 0px;
    margin-right: 0px;
  }
  #rcorners2 {
    margin: 0px;
  }
}

in html markup add classes to heading like so

<h1 class="retroshd col-xs-12 col-sm-12 col-md-12 col-lg-12"> Nikola Tesla </h1>

1 Like
4

Yes, that seemed to fix it Thank you so much!!!

Also one small thing. The shadowing on the h1 text within the element seems to be too off aligned on small screens. How would I make this responsive?

updated pen https://codepen.io/zimmjoshua/pen/PjKrKb

Thanks again!!

5

everything that looks not acceptable on extra small screens should be overridden in the media query, which you already have

@media (max-width:500px) {
  p {
    margin-left: 0px;
    margin-right: 0px;
  }
  #rcorners2 {
    margin: 0px;
  }
  .retroshd { // override text shadow for screens with width <= 500px
    text-shadow: 2px 2px 0px #d5d5d5, 3.5px 3.5px 0px rgba(0, 0, 0, 0.2);
  }
}

furthermore, bootstrap media queries are

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

so you may want to use not 500px for your media query, but 767px, i.e. media query should look like this

@media (max-width:767px) {
  p {
    margin-left: 0px;
    margin-right: 0px;
  }
  #rcorners2 {
    margin: 0px;
  }
  .retroshd {
    text-shadow: 2px 2px 0px #d5d5d5, 3.5px 3.5px 0px rgba(0, 0, 0, 0.2);
  }
}