Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Wrapping on mobile 1

Status
Not open for further replies.
Swi

Swi

Programmer
Feb 4, 2002
1,975
US
The below code is not working for mobile phones.

Code: 
<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
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Just on mobile.

Swi
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
I would rather have it not wrap.

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

Swi
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Thank you. Exactly what I ended up doing.

Swi
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
334
lmcate
lmcate
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
1K
spamjim
spamjim
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
948
Mike Lewis
Mike Lewis
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
459
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top