Home Forums Archived Forums Not Theme Related text wraps on desktop but not mobile

This topic contains 8 replies, has 3 voices, and was last updated by  scrambler 3 years, 3 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #18557

    robfoster
    Participant

    Hi There

    This isn’t theme related , but i wonder if you can help
    On my homepage http://cerveza.org.uk i have a cerveza logo to the left and the text wraps the image, this looks nice on desktop, but when you get to mobile view it doesn’t wrap, you have a couple of words at the top then the rest of the text goes underneath the logo, is there a way to have the text under the logo on the mobile view, but wrap on the desktop view?
    thanks
    Rob
    #26003

    robfoster
    Participant

    i reckon the logo is too big for the mobile view to allow the text to wrap properly, i wonder if theres a way to make the image smaller on mobile view…if i make the image smaller on desktop it doesn’t have the same impact

    #26004

    robfoster
    Participant

    Or indeed add an @media rule to make the image and text stack rather than wrap

    #26005

    scrambler
    Moderator
    When I shrink the browser, I always get the text wrapping around the guitar/beer bottle/cerveza logo in the content area.
    Are you saying that on an actual mobile device it behaves differently?
    There is a problem in your text, you appear to have put the H outside of the Span
    H<span….>aving a party….</span>
    Is that on purpose. Because it does not make sense. It should be

    <span….>Having a party….</span>
    Now if you dont want the text to wrap on mobile, you can add a class to the image so you can remove the float on mobile
    <img class=”mynofloat …..”    />
    Then use the rule

    .is-mobile .mynofloat {float:none !important;}
    You can use .is-mobile for all mobile devices, or just   .is-phone  for just phones
    #26006

    robfoster
    Participant
    when you reduce the browser it was wrapping, it just wasn’t on phones portrait, so i tried your suggestion and that worked, but i then decided i didn’t like the look of it, the logo is too large for mobile, but just right for desktop, so to get round it i put that section in twice the first time used a hide if mobile shortcode and the second one i reduced the image size and put it in a show if mobile shortcode, that gets round the problem as it now wraps on phone in portrait, but is there some clever css that might put the smaller image in below a certain width?, it would mean that if that message changes we wouldn’t have to change it twice.
    #26007

    scrambler
    Moderator

    If what you want is make the image smaller on phone, you can put a class on the image and add a CSS rule to reduce the size.

    <img class=”myimgsmall …..”    />
    Then use the rule

    .is-phone .myimgsmall {width:50% !important;}
    #26008

    robfoster
    Participant

    Exciting , I’ve never done anything like this before, B-)

    #26009

    jenm999
    Participant

    I put the image class in the HTML insertion section of the Xtreme admin config, and added this to the global css via the customizer

    .is-phone .myimgsmall {
        padding-top: 35px;
        padding-left: 30px;
    width:50% !important;
    }

    Ideally I’d like to expand the size of the black bar at the top on mobile but I was able to resize and move around the logo to the optimal size and spot using the settings above.

    #26010

    scrambler
    Moderator

    I answered your post in its own thread below
    http://forum.weavertheme.com/discussion/14297/logo-positionning-left-of-menu

    Please follow up in there

Viewing 9 posts - 1 through 9 (of 9 total)

The forum ‘ Not Theme Related’ is closed to new topics and replies.