0

Alright Noob alert! I am sorry in advance is question is already answered on here. If so please link me to the question because I couldn't find it.

I am building a responsive site right now and I have ran into two issues. The first one is when you are looking on any screen larger then a phone you see the name of my website in the top left corner. But I wanted to replace this with my logo once you are on a mobile device. One example of this is on Paypal.com. If you look on the desktop there is the Paypal logo and the words PayPal but on a mobile screen there is just the PayPal logo. What I have is written as follows: 

<p id="logo"><a href="">Name</a></p>

How would I go about this? Would this be something I could do in CSS or HTML or is this more of a javascript/jQuery thing?

The second issue is similar. In the middle of the banner there is text that saids "don't have an account?". I wanted to display this text on a tablet and computer screen but hide it on a phone. This is written as follows:

Don't have an account?

How would you feel I should go about fixing this? Thank you very much!

stutterbox16
  • 29
  • 2
  • You want Media Queries in css. Here's the link. http://stackoverflow.com/questions/16959848/how-to-implement-responsive-web-design-and-its-best-practices – Radio Feb 20 '15 at 01:23

1 Answers1

1

If you use media queries you can give your logo a different style on mobile. 

    @media screen and (max-width: 767px) {
        #logo {
            display: hidden;
        }
}

This will hide the logo id when the screen size is below 767px. If you want something to only show on mobile, set the display to "block".

Cato Benjaminsen
  • 11
  • 2