My code doesn't fit on mobile

HTML-CSS
1 
<!doctype html>
<html lang=en>
     <link rel="icon" type="image/png" href="/Users/domenicocefariello/Desktop/squareart/prova.png">
     <meta http-equiv="X-UA-Compatible" content="IE-edge">
      <meta name="viewport" content="width=device-width, user-scalable=no">
     <meta charset="UTH-8">
     <meta name="author" content="Domenico Cefariello">
     <meta name="description" content="social manager&designer">
     <link rel="stylesheet" href="/Users/domenicocefariello/Desktop/sitosquare/square.css">
     <head>
       <style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
</style>
</head>
     <body>
       <section>
         <!---navigation--------->
         <nav>
<!---logo----->
<a href="#" class="logo"><strong>Squareart</strong></a>
<!---menu------>
<ul>
<li><a href="#about-container" class="active">About us</a></li>
<li><a href="#howto-container">How to find us</a></li>
<li><a href="#works-container">Works</a></li>
<li><a href="#sponsorship-container">Sponsorship</a></li>
<li><a href="#contact-container">Contact Us</a></li>
</ul>
         </nav>
         <!--text------->
         <div class="text-container">
<p><strong>Hello,</strong></p>
<p>we are SQUAREART,</p>
<p>your perfect social media manager <br>& designer.</br></p>
<p>Continue to know more.</p>
<button class="howto-button1"><a href="https://www.etsy.com/it/shop/squareartIT" target="_blank" rel="external">SHOP</a></button>
         </div>
         <!--logo------------>
         <img src="/Users/domenicocefariello/Desktop/squareart/prova.png" class="logo-photo" alt="logo-photo">
      </section>
      <!--about us section------------>
      <section>
         <div class="about-container">
         <!--abouttext---------->
          <div class="about-text">
           <h1><b>ABOUT US</b></h1>
           <p>We are a social media manager & designer agency.</p>
           <p>Our shop is situated on etsy</p>
           <p>Check our social media pages and our etsy shop.</p>
           <button class="howto-button2"><a href="https://www.etsy.com/it/shop/squareartIT" target="_blank" rel="alternate">SHOP</a></button>
         </div>
       </div>
      </section>
      <!--howto section---------->
      <section>
<div class="howto-container">
<div class="howto-text">
  <h1><b>HOW TO FIND US</b></h1>
        <!--howtobuttons---------->
<ul class="howtobuttonlist">
  <li><button class="howto-button1"><a href="https://www.etsy.com/it/shop/squareartIT?coupon=OPENINGSALE20" target="_blank" rel="external">OPENING SALE</a></button>
  <button class="howto-button2"><a href="https://www.instagram.com/_squareart_/" target="_blank" rel="external">INSTAGRAM</a></button></li>
  <li><button class="howto-button2"><a href="https://twitter.com/squareart2" target="_blank" rel="external">TWITTER</a></button>
  <button class="howto-button1"><a href="http://tiktok.com/@_squareart_" target="_blank" rel="external">TIK TOK</a></button></li>
  </ul>
</div>
         </div>
      </section>
      <!--works section---------->
      <section>
         <div class="works-container"></div>
         <img src="/Users/domenicocefariello/Desktop/html/logo-3.png">
         <img src="/Users/domenicocefariello/Desktop/html/logo2.png">
      </section>
      <!--sponsorship section---------->
      <section>
         <div class="sponsorship-container"></div>
      </section>
      <!--contact section---------->
      <section>
         <div class="contact-container"></div>
      </section>
    </body>
     </html>
2

hey @domecefa!

Can explain more about your problem?

3

Hi. My code when i’m using the pc fit perfectly in the page. When i change the device option to mobile, all the images, texts and other things are not in the right place.

5

Try using media queries

6

i tried but it doesn’t work… maybe i’m doing something wrong with the css?

7

and how do i fix it…

8

Can you give a link to your project?

9

my html/css files

(Attachment square.html is missing)

(Attachment square.css is missing)

10

if you have your code in a repository you can link to that

11

Im new at this as well, but I noticed your only Style entry was for fonts. There was no media queries or resizing in there. That’s where you’d make your resizing to fit the device of your choosing right?

12

yes but i don’t know how to do it, i’m into code for one week!!!

13

Use @media in your code.

If still didn’t work, please give a link to your code.

14

I was having the same issue. After seeing the responses to your post it gave me a direction to look, without giving me the answer. Thanks :grinning:

1 Like
15

It’s done with media queries. There’s a section in Freecodecamp that deals with media queries, I’m not sure how far you’ve gone. They basically give you code to say ‘if the screen is this big, style my page this way, if it’s this big style it another way’. Hope that helps.

1 Like