Mobile view not displaying right

Hi Rachelgasarini,

The problem comes when you moved it down. You used “top” which is an exact state, it won’t change depending on what device you use. If you used “margin-top” instead, it would adjust as the screen gets smaller or bigger.

Furthermore, you would probably get a better result if you used

.site-title {
  margin-top: 10%;
}

So that it will scale better as the page changes width.

Hope this helps!

Thanks for pitching in, nlmosler!

Rachel – Another thing you could do is wrap your CSS in a media query so it only affects larger screens above a certain browser width.

You can learn more about using media queries that target certain screen sizes here:

https://en.support.wordpress.com/custom-design/custom-css-media-queries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

These forums are for folks running the WordPress software on their own hosting. Since you’re running a WordPress.com site, further questions about custom CSS should go in the WordPress.com forum here:

https://en.forums.wordpress.com/forum/css-customization