I created a website with dotnetnuke that has a responsive skin. In the "normal" version, it works fine, but there is one page that does not show its content as it should in the mobile version.
This is the page in question, http://www.ikuben.no/Bedriftene.aspx
When I browse it in my pc, this is what I get
Wheb I browse it in my emulator, this is what I get
This is the html/cssI use for each Image/Text that goes into a Html Pro module,
<div class="bottomborder">
<div class="marginright">
<img alt="" width="139" height="139" src="/portals/85/Bedrifter/Logoer/AkerMidsund_hvit.png" class="Images" />
</div>
<div class="overflow">
<a class="LinksMenu LeftMenu HoverLinkH1" href="http://www.akermidsund.no">Aker Midsund</a>
<br />
<br />
<p> Aker Midsund er verdensledende innen vårt fagområde! Gjennom 40 år har vi tilegnet oss ekspertise innen mekanisk design og fabrikasjon av trykktanker o.l. </p>
<br />
<a class="LinksMenu LeftMenu HoverLink" href="http://www.akermidsund.no">www.akermidsund.no</a><br />
</div>
</div>
.bottomborder {
border-bottom:#dfdede solid 1px;
margin-top: 30px;
padding-bottom: 10px;
padding-left: 10px;
width: auto;
height:auto;
}
.marginright
{
margin-right: 30px;
float: left;
}
.overflow
{
overflow: hidden;
}
.LinksMenu.LeftMenu.HoverLinkH1, A.LinksMenu.LeftMenu.HoverLinkH1:link, A.LinksMenu.LeftMenu.HoverLinkH1:visited, A.LinksMenu.LeftMenu.HoverLinkH1:active
{
padding-left: 0px;
color: #472676;
font-size: 22px;
border-bottom: 0px;
}
The text is supposed to stay below the images in the mobile version. But how can I get the images to stay on the left??