Member Avatar for solomon_13000

I am attempting to create a responsive website. On my left hand side I have a jpeg image and on the right hand side there is a box with text description. However when I view the website on a smaller screen device it is not resizing properly especially the image. Apart from that both image and box with text description is not centered. Did I miss something?

<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
    float: left;
    margin: 10px;
    padding: 10px;
    width: 450px;
    height: 300px;
    border: 1px solid black;
}  

.leftbox{
    width:500px;
    float:left;
    margin:10px 120px 0px 100px;
}

@media only screen and (max-width:768px){
    .coming img{
        max-width:100%;
        height:auto;
    }
}

</style>
</head>
<body>

<div class="leftbox">
    <img src="1.jpg" width="600">
</div>

<div class="city">
    <h2>About Us</h2>
    <p>xxxxxxxxx</p>
    <p>For further enquires and appointment, kindly contact us or email us at xxx</p>
</div>

</body>
</html>

Your help is kindly appreciated.

  • 3 Contributors
  • 3 Replies
  • 272 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Violet_82

Recommended Answers

All 3 Replies

Member Avatar for solomon_13000

I made some changes however when I view on a mobile device I still encounter the same problem.

<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
    float: left;
    margin: 10px;
    padding: 10px;
    width: 450px;
    height: 300px;
    border: 1px solid black;
}  

.rotateImg{
    width:500px;
    height: 322px;
    float:left;
    margin:10px 10px 0px 100px;
}

@media only screen and (max-width:400){
    .leftbox{
        width:500px;
        height:auto;
    }
}

</style>
</head>
<body>

<div class="leftbox">
    <img src="1.jpg" class="rotateImg">
</div>

<div class="city">
    <h2>About Us</h2>
    <p>xxxxxxxxx</p>
    <p>For further enquires and appointment, kindly contact us or email us at xxx</p>
</div>

</body>
</html>
Member Avatar for gentlemedia

You should not using fixed widths (in pixels) with responsive web design. Fixed heights was before responsive web design already not feasible and flexible to use, because you should let the content dicate the height of your boxes/containers.

The grid/layout should be flexible which means you use widths in percentages and you don't declare width and height attributes on your img tags. Your images should also be fluid so all you do (for now) in your CSS is this:

img {
    max-width: 100%;
    height: auto
}

According to your layout you have two containers next to each other, but if the screen gets too narrow / too small for this, you will have to drop the containers underneath each other which you can do by setting breakpoints with CSS media queries.

Also you need to have a special meta tag in your head to avoid that your web page gets scaled down and your user have to pinch and zoom to view/read it properly.

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

These are just some of the basic principles of reponsive web design, but there are more and I'd recommend you to just learn them before you start developing anything.

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/

Edited by gentlemedia
Member Avatar for Violet_82

Sorry, bit late to the party!
There are many different ways you can achieve this. gentlemedia's suggestion is one way to do it.
Techically, you could still use fix width for your image, providing that, with media queries, you change the width accordingly, depending on which device you're targeting. For example, say that on desktop your image is 500px wide, then when you go to tablet reduce it to, say, 250px and then to 150px on mobile (that depends on how important your image is I suppose).
Or, it is pretty normal to remove the floats from divs when in mobile device and stack your containers on the top of each other (in your case image and box with text).
The media queries I often use are these:

/*Tablets*/ @media (min-width:768px) and (max-width:1023px){...}
/*Mobiles*/@media (max-width:767px){...}

Hope this helps

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.