Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4

Thread: Floating Div

  1. #1
    Senior Member
    Join Date
    Dec 2013
    Posts
    109
    Member #
    37915
    Liked
    2 times

    Floating Div

    Hi all,

    I inherited the site https://tinyurl.com/y7mntjfk. I noticed that the div next to "BENEFITS OF
    PARTNERING WITH..." does not look right on my iPhone 6s: https://imgur.com/a/jH8PZ.

    The theme says the name of the studio that built the site, but I think it’s a modified version of “Be” theme.
    Also, the page uses Muffin Builder.

    I think it has to do with “floating” the div. Is that right? If so, how can I fix that?

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,104
    Member #
    27197
    Liked
    946 times
    Set a media query that sets float:none when it's in portrait.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member
    Join Date
    Dec 2013
    Posts
    109
    Member #
    37915
    Liked
    2 times
    Quote Originally Posted by Ronald Roe View Post
    Set a media query that sets float:none when it's in portrait.
    Hi Ronald, thanks for the advice. I get the concept for that. My CSS is a little rusty. I tried a few divs, I couldn't get it to work.

    Another thing I noticed, is

    1. as the browser width decreases, anything less than a 560 px width, the text on the left becomes text above the right, and the height of both of those exceeds the height of that jpg behind them.

    2. The background image, http://www.teasolutionsinc.org/wp-co...Subheader1.jpg, is only so tall.

    3. there's padding that can be removed, maybe make the font smaller to make the text fit.

    So, I think we have another issue.

    My logic mind says this is what should happen:

    If screen width < 600 px, then set padding-top = 10px for div class "section mcb-section dark"

    OR

    If screen width < 600 px, fit all the text in there as best as possible.

    Am I on the right track?

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,104
    Member #
    27197
    Liked
    946 times
    I see what you mean. I personally would split the photo up into two separate images, that way you can control them separately. And then you could do as I said above, plus adjust padding and text size. The text is too big on mobile anyway.

    I wrote an article the other day about similar scenarios. I won't post the link, as I don't want it to be taken as advertisement, but if you click the link in my signature and go to the blog, it's the newest post.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:49 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com