INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Wrapping on mobile

Wrapping on mobile

(OP)
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

RE: Wrapping on mobile

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

RE: Wrapping on mobile

(OP)
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

RE: Wrapping on mobile

(OP)
Just on mobile.

Swi

RE: Wrapping on mobile

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

RE: Wrapping on mobile

(OP)
I would rather have it not wrap.

Swi

RE: Wrapping on mobile

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

Swi

RE: Wrapping on mobile

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

RE: Wrapping on mobile

(OP)
Thank you. Exactly what I ended up doing.

Swi

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close