Wrapping on mobile 1

[Swi]

The below code is not working for mobile phones.

<div style="height:auto; background-image: url(/wp-content/uploads/2015/01/KixBottom_bar.png);"><img src="/wp-content/uploads/2015/01/KixBottom_Moose.png" alt="McSherrystown Moose" style="padding-top: 10px;padding-bottom: 10px;padding-left: 10px;"><img style="float:right;padding-top: 15px;padding-right: 10px;padding-bottom: 10px;" src="/wp-content/uploads/2015/01/KixBottom_Wine.png" alt="Winebrenners"></div>

It is second logo that is floating to the right is wrapping on mobile devices. What is the best way to account for this?

Thanks.

Swi

 

[vacunita]

So you don't want the second image to wrap?

Make sure there's enough room to accommodate both images on the same line. i.e set a minimum width for the Div so that there's enough space for both images on the same line.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Swi]

That may be the best thing to do. How would I make it wrap?

If I do a min-width it does not look very good on mobile.

Swi

 

[Swi]

Just on mobile.

Swi

 

[vacunita]

I'm confused. Do you want it to wrap or not?



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Swi]

I would rather have it not wrap.

Swi

 

[Swi]

Hah! Client has changed their mind yet again. They want it to wrap but only on the mobile version.

Swi

 

[vacunita]

How are you determining mobile version?

You need to set a width that can accommodate both images so it doesn't wrap, and inversely change the width to be 100% of the screen, so that it does wrap in the mobile version.

Assuming you are using media queries in your CSS, just change the width for each version.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Swi]

Thank you. Exactly what I ended up doing.

Swi