Question

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&aring;rt fagomr&aring;de! Gjennom 40 &aring;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??

Answer 1

This is all it takes. Now it’s working.

@media handheld, only screen and (max-width:450px) {
.marginright{float:left;}

}