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:
http://en.support.wordpress.com/custom-design/custom-css-media-queries/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://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
