4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Newbie Question On Div Tags And Mobile

by jbearnolimits
3 replies
  • WEB DESIGN
    • |
I'm learning how to use div's instead of tables. Right now I am also trying to figure out how to get a site to be responsive as well. I am having trouble though. I want to know if there is a way to scale down two images that are placed side by side in different div tags.

The two images are in the missiontop and logotop div's. I seem to be able to get them to move along with different widths but they don't scale and they end up floating over each other.

Here is the html I am using:

Code:
<div id="wrapper">
<div id="topbackground">
<div id="topContent">
<div id="LogoTop"><img src="images/Logo.png"
 alt="On The Line Ministries"></div>
<div id="MissionTop"><img src="images/Mission.png"
 alt="Our mission is to reach the lost by teaching the saved how to be the church."></div>
<div class="clear"></div>
Here is the css:

Code:
h1 {
  font-family: Tahoma;
  font-weight: bold;
  font-size: 19pt;
  color: #003399;
}
h2 {
  font-family: tahoma;
  font-size: 15pt;
  font-weight: bold;
  color: #003399;
}
scriptureref {
  font-family: Georgia;
  font-size: 12pt;
  font-weight: bold;
}
scripturequote {
  font-size: 12pt;
  font-style: italic;
}
#wrapper {
  margin: 0px auto auto;
  width: 100%;
}
#topbackground {
  margin: 0px auto auto;
  background-image: url(images/topbackground.jpg);
  background-repeat: repeat-x;
  background-attachment: fixed;
  width: 100%;
  height: 178px;
}
body {
  margin: 0px;
  width: 100%;
}
#topContent {
  width: 100%;
  max-width: 984px;
  padding-top: 5px;
  margin-left: auto;
  margin-right: auto;
}
#LogoTop {
  float: left;
  width: 50%;
}
#MissionTop {
  float: right;
  width: 50%;
  text-align: right;
}
.clear {
  clear: both;
}
#div #mobile #newbie #question #tags
  • Profile picture of the author KamesG
    You want to use something like...

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

    That is just the basic concept, but essentially you want to target the image to be fluid and not just the container it's in. You probably will need multiple variations depending on the design and different breakpoints.

    You could also make a class to target all of the images, so they are responsive.

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

    <div id="LogoTop"><img src="http://www.warriorforum.com/images/Logo.png" class="img-responsive" alt="On The Line Ministries"></div>
    {{ DiscussionBoard.errors[9387942].message }}
  • Profile picture of the author clickbump
    If you can post an example of what you are looking for, perhaps we can help. Most responsive strategies will break the float of the images so that they will no longer be displayed side by side once they are viewed on the narrower mobile display.

    Do I understand you correctly that you want the images to remain side by side even on smaller screens?
    Signature
    {{ DiscussionBoard.errors[9393498].message }}
  • Profile picture of the author Global Web Solutions
    Hi,

    Check out this great grid system: Responsive Web Design just got Easier with the Responsive Grid System
    Very easy to use, all you have to do is copy paste the html/css code.

    Hope this helps you
    {{ DiscussionBoard.errors[9398995].message }}

Trending Topics