CODEWITHSUNDEEP
htmlcss
jh_135
jh_135

Reputation: 17

Having trouble making a responsive website (doesn't display correctly on different devices/resolutions)

For my project, I have created a fake beachside hotel accommodation website. As of now, I feel like I have successfully completed my website in terms of it's content. However, one issue still remains within the development of this website. I have recently discovered that when I reduce the size of the google window when displaying my website will cause the content within it to not display correctly (not be responsive). This specifically affects the header and the footer This is the same deal when I tested my website on a laptop with a much smaller resolution than my computer monitor, and in order for the website to look neat was to zoom out at around 75%. I've seen tutorials on how to do it, and it's mostly to do with using this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

I've also seen that using the min-height tag can help, but to me it doesn't work.

This is affecting mainly the header image and the footer since it has social media icons within it, along with a span tag to separate a link to a contact form. I think the issue might have to do with the placement of my code's more specifically in terms of where I have placed the div's and class's. It may also have to do with the two-column layout present within the code. I also think the solution is simple but I obviously can't figure it out. Any help is appreciated as always. Also keep in mind the code below is only for the Home Page. The styling for other pages are slightly different, but I think I might be able to figure out how to fix the other pages as well after the home page solution has been given to me. If you need screenshots of it I'll happily upload them.

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

<div class="container">
    <div id="header">
        <a href="index.html" style="text-decoration: none;">
         <img src="images/sorrento_by_the_sea_logo.jpg" alt="Our Logo" title="Our Logo">
        </a>
    </div>

    <div id="nav">
        <ul>
            <a href="index.html">Home</a>
            |
            <a href="contact.html">Getting There</a>
            |
            <a href="apartment.html">The Apartment</a>
            |
            <a href="pricing.html"> Pricing and T&C</a>          
        </ul>
    </div>
    
<body>
      
     <div class="column-layout">
      <div class="main-column">
         <h1>Who are we?</h1>
         <p><b>Sorrento by the Sea</b> is a luxary apartment located on the picturesque <b>Mornington Pennisula</b>, an approximate one-hour scenic drive from Melbourne, and right next door to Portsea.
         Our apartment is a lazy 10-minute walk from the relaxed township of Sorrento that offers restaurants, cafes, a chemist, a supermarket, a butcher and lots more. It is located in a quiet avenue, just 4 houses from the beach. It is in easy walking distance of the ocean beaches and surf.</p>
         <p>Your <b>private luxury apartment</b> consists of a spacious living area with <b>leather lounge suite</b> overlooking a sun drenched, tree-filled private garden.</p>
         <p>A <b>separate kitchenette</b> has everything you need to make your stay relaxed and comfortable. A <b>queen sized bedroom</b> and an amazing bathroom complete with <b>free standing black bath</b> entices you to relax and unwind.</p>
         <p>Two TVs are sure to make everyone happy!  An <b>undercover BBQ area</b> with seating offers plenty of space to stretch out and enjoy that cup of freshly brewed coffee or a glass of wine.</p>
            <h2 style="color:#4d1d18;padding-left:220px;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">This is the perfect place for a home away from home</h2>
         <img src="images/back_beach.jpg" alt="Back Beach" title="Back Beach" style="width:690px;margin-left: 210px;">
         <div class="pet">
            <h1>Pet Friendly</h1>
            <p>We understand that pets are an important part of the family.
               <b>We are pet friendly by arrangement</b> - so please talk to us about your needs.
               We offer a <b>fully enclosed backyard, shady trees, water bowls, food bowls and a lead if you forget one</b>.</p>
            </div>
        </div>

        <div class="tests">
         <h1>Testimonials</h1>
         <q>So sorry we had to go home after only one night. We will definitely stay two nights next time!</q>
         <br>
         <q>This apartment is close to everything. We didn't need the car as the walks were amazing"</q>
         <br>
         <q>Your attention to detail made our stay so relaxed and comfortable. It was such a shame we had to drive back to our little flat, which is smaller than your apartment. We want to move in!</q>
         <br>
         <q>Cosy and comfortable. We imagined we owned it and enjoyed being spoilt. Thank you</q>
         <br>
         <q>What a magical stay at such an amazing place. Completely self-contained and very private. We loved it and will return again and again.</q>
         <br>
         <q>Never felt so spoilt. A perfect get away and so close to everything. We had the best bath ever!</q>
         <br>
         <q>A few minutes’ walk from the beach, picnic basket in hand and towel over the shoulder - can't think of anything better except that wonderful breakfast. That bacon is the best in Melbourne!</q>
         <br>
         <q>Relaxing in that sunny garden watching our dog chasing balls. Let me stay forever!</q>
        </div>
        
        
        </div>
     
     <div class="flex-container">
        
           <img src="images/ocean_beach.jpg" alt="Ocean Beach" title="Beach with Rocks" style="max-width:100%;height:auto;margin:0 60px 0 60px;">
        <br>
           <img src="images/back_beach_sorrento.jpg" alt="Ocean Beach 2" title="Beach Walkway" style="max-width:100%;height:auto;margin-right:60px;">
        <br>
           <img src="images/ocean_beach3.jpg" alt="Ocean Beach 3" title="Dark Blue Ocean" style="max-width:100%;height:auto;">
         
     </div>
     
     
     
          
</body>

<footer>
    <div class="social-media">
        <ul>
            <a href="#"><img src="images/facebook_small.png"></a>
            <a href="#"><img src="images/instagram_small.png"></a>
            <a href="#"><img src="images/twitter_small.png"></a>
            <a href="#"><img src="images/youtube-variation_small.png"></a>
            <a href="#"><img src="images/paypal_small.png"></a>
        </ul>
        <span>
            <a href="form.html" style="padding: 5px;">Contact form</a>
        </span>
    </div>
    </footer>

</div>

</html>

And this is the CSS:

* {
    font-family:  Helvetica, sans-serif;
    background-color: lightsteelblue;

}

p {
    line-height: 150%;
}


.container {
    height:auto;
    max-width: 100%;
}


#header {
    margin: 220px, 250px;
    
}

#header img {
    max-width:100%;
    height:auto;
    margin-left: 500px;
}


#nav {
    text-decoration:none;
    text-align:right;
    padding-right:20px;
    border: 3.55px solid #4d1d18;
    border-radius:10px;
    margin-top: 5px;
    background-color: lightsteelblue;
    max-width:100% ;
}


a {
    text-decoration: none;
    color:#4d1d18
}

a:visited {
    color: #4d1d18;
}

a:hover {
    color: #555;
}

a:active {
    color: #555;
}



h1 {
    color:#87423c;
    font-size: 36px;
}

h2 {
    font-size: 24px;
    color: #4d1d18;
}

/*---------footer-----*/

footer {
    background-color: lightsteelblue;
    color: #443;

  }



.social-media{
    text-align: center;
    border: 3px solid #4d1d18;
    border-radius: 15px;
    padding: 5px 15px;
    margin-top: 15px;

}

.social-media span {
    text-align: right;
    margin-left: 1300px;
    border: 1px solid #682721;
    border-radius: 5px;
    padding: 10px;

}

.social-media img {
    padding-right: 20px;
}



/*--------Home----------*/
.column-layout {
    line-height: 1.60;
    padding: 20px 20px;
    display:flex;
    background-color: lightsteelblue;
    border-radius: 10px;
    border: 1px 
}

.main-column {
    display:flex;
    flex-direction:column;
    text-align:left;
    margin-top:20px;
    margin-bottom:30px;
    margin-right:80px;
    margin-left:20px;
}

.tests {
    display: flex;
    flex-direction: column;
    margin-top: 140px;
    border: 5px solid #4d1d18;
    border-radius:20px;
    height: 800px;
    padding: 0px 30px 0px 30px;
}

q {font-style:italic;}

.flex-container {
    display: flex;
    background-color: lightsteelblue;

}


.pet {
    border: dotted #4d1d18;
    border-radius: 10px;
    padding: 0px 20px 10px 30px;
    margin-top: 50px;
}
    
ul {
    display:inline-block;
}

Upvotes: 0

Views: 66

Answers (2)

Giorgos
Giorgos

Reputation: 36

I think it is a good practice to wrap your image <img> in a container <div>. You have to set the container's width and height to some values (either with flex or percent values or fixed values) and then set the image's width and height as a percent, relative to its container. You can also try and use the object-fit: contain; css property on the image. You can also consider using media queries for different screen resolutions. I found this stackoverflow QA useful in this topic.

Edit: Along with object-fit: contain; you can use max-width: 100%; and max-height: 100%; on the image.

Upvotes: 1

MaxiGui
MaxiGui

Reputation: 6348

Use max-height: 100%; on your image. As you did with max-widthon your image.

Upvotes: 1

Related Questions