CODEWITHSUNDEEP
csshtml
Him_Jalpert
Him_Jalpert

Reputation: 2516

Make image not wrap on small monitors

Having a problem where on small monitors the image wraps to the next line is there a way to make it stay on the same line and just have the scrollbar appear to see all of the image or something?

<body style="font-name:Arial,Helvetica;font-size:10pt">
   <h1>Order Confirmation</h1>  
     <img src="http://www.new-line.com/catalog/images/nlbanner1.png" /><img src="http://www.new-line.com/catalog/images/nlbanner2.png" />

http://www.new-line.com/catalog/images/nlbanner1.pnghttp://www.new-line.com/catalog/images/nlbanner2.png

It is doing this, but I want the nlbanner 2 to be beside nlbanner1 on the same line. It looks great on large monitors but small ones and mobile seem to have this problem. Any suggestions?

Upvotes: 0

Views: 68

Answers (1)

Brian Phillips
Brian Phillips

Reputation: 4425

Add a div around the image:

<div class="pic">
   <img src="http://www.new-line.com/catalog/images/nlbanner1.png" /><img src="http://www.new-line.com/catalog/images/nlbanner2.png" />
</div>

Then with CSS:

.pic {
  white-space: nowrap;  
}

Like Charles380 mentioned, if you want the scroll functionality, use:

.pic {
  white-space: nowrap;
  overflow: scroll;  
}

Note that this will also cause the scrollbars to appear, which may not fit with the look you want.

jsfiddle

Upvotes: 3

Related Questions