CODEWITHSUNDEEP
htmlcss
Kat
Kat

Reputation: 13

Can't get my page to be responsive for mobile

I have watched tutorials and checked on this site but no matter what I do I can't get my page to be responsive for mobile. I want the image on top and the text in a nice paragraph below. I am new to html and css, I don't know any others. The code I'm adding is the original before I tried to make it responsive. 

   <DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Home</title>
   <link rel="stylesheet" type="text/css" href="merchandise.css"
   </head>



    <div class="header">
    <img class="banner-image" src="ccc.png" width="100%" height="150px">




    </div>

    <ul class="nav">



    <li><a href="index.php">Home</a></li>
    <li><a href="aboutus.php">About Us</a></li>   
    <li><a href="menu.php">Menu</a></li> 
    <li><a href="entertowin.php">Enter to Win</a></li> 
    <li><a href="merchandise.php">Merchandise</a></li> 
    <li><a href="events.php">Events</a></li> 
    <li><a href="contactus.php">Contact Us</a></li>

    </ul>  







     <style>

    .float-img {
     float: left;
     margin-right: 10px;
     margin-left: 5px;    
     margin-bottom: 0px;
     margin-top: 10px;
     padding: 2px;
     border: none;
     border-color: #ffb6c1ff;

     }



      </style>



   <body>

    <img src="british-shorthair-3055340_1920.jpg" width:"400" height="400" 

   class="float-img">

    <style>

    p {margin-left: 250px; margin-top: 40px;
     margin-right: 20px;
     line-height: 38px;
    } 

    </style>

   <font size="5" color="#00b8e6" font-align: center > 


   <p>



  Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute 
   cat themed foods and drinks in a relaxing environment. Spend some quality 
  time 
playing with some feline friends. Enjoy watching the cats have fun in an 
environment made just for them. All cats will be adoptable and provided by 
the local shelter. Cat Corner Cafe will also have fun events like cat yoga, 
art with cats and game days. Come by yourself, with your meetup group or 
have your next birthday party here! We look forward to seeing you. To be 
alerted when we open please sign up with your email on our homepage.


   </p>
    </text>
  </body>


   </head>
   </html>


    body {
   margin: 0;
   padding: 0;
  font-family: 'arial', serif;
   }

  .nav {
  background-color:#ffb6c1;
  color:#ffffff
   list-style: none;
   text-align: center;
   padding: 20px 0 20px 0;

 }

  .nav > li {
  display: inline-block;
  padding-right: 50px;
  font-size: 16px;

  }

   .nav> li > a {
   text-decoration: none;
   color: #ffffff
   }

   .nav > li > a:hover {
   color:   #C0C0C0
   }

   .banner {
   width: 100;
   display: block;


   }

   .banner > .bannerimage {
   width: 100;
   height: 100;
   display: block;


   }

  ul.nav{
  margin: 0;
  }

 div.left {
 width: 50%; 
 padding: 0 0 0 5%;
 margin-right: 5px;
 margin-top: 10px;
 float: left}


 div.right {
 width: 50%; 
 padding: 0 5% 0 0;
 float: right}
 p {
 padding-top: 25px;
 text-align: left;
  }

Upvotes: 1

Views: 1531

Answers (6)

Filipe Freire
Filipe Freire

Reputation: 833

Like a previous answer

You're gonna have to fix your code (html stuff) first

But, if for now you don't want to invest a lot of time learning about media queries or code a few rules in CSS, I'd suggest you use a framework and skip the design part, while still making your page look minimally presentable with a tidy look.

I recommend you give a look at Tacit CSS framework. It's ideal for people with zero CSS and design skills and it doesn't involve creating CSS rules from the ground up, you just worry about your HTML code and you need to include Tacit's CSS file.

Upvotes: 1

Ylama
Ylama

Reputation: 2489

Fixing your HTML first!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="merchandise.css">    

  <style>

    .float-img {
    float: left;
    margin-right: 10px;
    margin-left: 5px;    
    margin-bottom: 0px;
    margin-top: 10px;
    padding: 2px;
    border: none;
    border-color: #ffb6c1ff;
    }

    p {
    margin-left: 250px; 
    margin-top: 40px;
    margin-right: 20px;
    line-height: 38px;
    } 


    @media (max-width: 1024px) {

    body img {
    max-width: 100px;
    height: 100px;
    }

    body div img {
    max-width: 50px;
    height: 50px;
    }
    
    }


  </style>

</head>  
<body>
    <div class="header">
      <img class="banner-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg/1160px-Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg.png" width="1365px" height="150px">
    </div>

    <ul class="nav">
      <li><a href="index.php">Home</a></li>
      <li><a href="aboutus.php">About Us</a></li>   
      <li><a href="menu.php">Menu</a></li> 
      <li><a href="entertowin.php">Enter to Win</a></li> 
      <li><a href="merchandise.php">Merchandise</a></li> 
      <li><a href="events.php">Events</a></li> 
      <li><a href="contactus.php">Contact Us</a></li>
    </ul>  

    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg/1160px-Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg.png" width:"400" height="400"> 

   <div class="float-img">
     <p>Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute 
cat themed foods and drinks in a relaxing environment. Spend some quality 
time playing with some feline friends. Enjoy watching the cats have fun in an 
environment made just for them. All cats will be adoptable and provided by 
the local shelter. Cat Corner Cafe will also have fun events like cat yoga, 
art with cats and game days. Come by yourself, with your meetup group or 
have your next birthday party here! We look forward to seeing you. To be 
alerted when we open please sign up with your email on our homepage.</p>
   </div>
  </body>
</html>

Now for the right solution without framework use @media Queries. Do your homework here .

Now for you the easy Solution to get this responsive is looking into using an HTML framework ,such as the famous Bootstrap, which you wil have to learn allot to fully understand the power behind it but Bootstrap has good documentation to get you going.

Upvotes: 4

Mark Boleigha
Mark Boleigha

Reputation: 51

Use a CSS framework. I will recommend bootstrap CSS framework. It will handle all of that for you. UIkit and Foundation are good alternatives too.

Upvotes: 0

Suresh
Suresh

Reputation: 427

You're gonna have to fix your code (html stuff) first and then learn to use media queries.

With media queries, you can target different devices and write specific css that applies to only those devices.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

DO NOT LEARN A FRAMEWORK JUST YET

You should build your knowledge of HTML and CSS first and have a firm understanding of both of them before learning any framework. This will insure that when you learn any framework, you'll be able to make the framework work the way you want.. If you start relying on a framework just yet, you will work according to the framework

Upvotes: 3

Eriks Klotins
Eriks Klotins

Reputation: 4180

Take a look at bootstrap http://getbootstrap.com/ it is html/css framework for making responsive websites. Check out how to make a grid layout.

You can dig into media queries yourself but that is not exactly needed if you use a framework https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Upvotes: 0

Martin Meli
Martin Meli

Reputation: 575

In order for an image to be considered as a solid object in css it must have the "display: block;" attribute. You might need to also set the same style property to the text paragraph.

Try the following: 

.float-img {
 float: left;
 margin-right: 10px;
 margin-left: 5px;    
 margin-bottom: 0px;
 margin-top: 10px;
 padding: 2px;
 border: none;
 border-color: #ffb6c1ff;
 display: block;
}

Explanation: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_display

Upvotes: 0

Related Questions