Help - Search - Members - Calendar
Full Version: Food and price on different line (mobile)
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
htmllama
Hi guys,

could you help me with this below?

https://i.gyazo.com/ea8b8194598eed6731b0002171ae572a.png

This is how my restaurant site looks on mobile - the prices are fucked up and I would like to have them on the same line as the food/wine. I guess I need to add some space between, but dont know how. It is wordpress, I can also add a line into the css.

This is how the code looks:

<p><span style="font-size: 14pt; font-family: oswald-light;"><span style="float: left;"><strong>Risotto se salsicciou</strong><br />Doporučené víno: Merlot</span> <span style="float: right;"><strong>349 Kč</strong><br />105 Kč</span></span></p><p>&nbsp;</p>
pandy
Well, that what floats do when there isn't room enough for them, they drop to the next line.

You can stop lines from wrapping with white-space: nowrap. But them scrolling will be needed instead if what you shows really takes up the whole screen. There are probably prettier ways of doing it, but something like this would work.

CODE
.item .food, .item .drink   { float: left; clear: left;
                              white-space: nowrap }
.item .price                { margin-left: 1em }


HTML
<div class="item">
<div class="food">
Risotto se salsicciou <span class="price">349 Kč</span>
</div>
<div class="drink">
Doporučené víno: Merlot <span class="price">105 Kč</span>
</div>
</div>


Then you can use those selectors for your text formatting so you can rid of style attributes and so on. Also, if the user doesn't have oswald-light installed, they will see another font, probably Times New Roman. That's why you should use backup fonts and have a generic font family at the end of the list.

But I have the feeling that you have other tings on the page that makes the available space too small for the floats. Just what you show looks like it would fit on a mobile screen. If that's the case you need to show us the real thing.
pandy
I got a little carried away by your floats. Actually, when done this way there is no point in floating. You can remove the float and clear declarations from the CSS and just let the DIVs stack.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.