text wraps on desktop but not mobile

[robfoster]

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

[robfoster]

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

[robfoster]

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

[scrambler]

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

[robfoster]

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.

[scrambler]

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;}

[robfoster]

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

[jenm999]

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.

[scrambler]

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

[Author]

Posts