移动网站上的CSS问题

Question

I have a site that I am working on at http://wpmend.com . The site looks ok on desktop but on Mobile well, I think my custom CSS has messed it up. You'll see that the text and button on the homepage section don't look right, and in the Request a Job section, the buttons for the first two job types don't show up at all.

I have searched this site and found similar issues and fixes but none that have addressed my exact problem. Please advise on how I can fix the look on the mobile site. By the way, it's a Wordpress site using the Rapid theme.

Thanks in advance!

Scott.

Answer 1

Maybe you're good working with a media query for CSS3.

Add this code to your CSS for the page, where #container is the object that wraps the button at the top.

@media screen and (max-device-width:480px){
    #container: margin-top:15px;
}

This will implement this CSS code when the device width is smaller than 480px. It'll move your container below your header down a little bit.

Note: not all mobile devices are smaller than 480px, you'll have to implement multiple media queries for specific devices. Refer to: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/