Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Food and price on different line (mobile)

Posted by: htmllama Jun 16 2019, 02:26 PM

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> </p>

Posted by: pandy Jun 16 2019, 04:47 PM

Well, that's 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.

Posted by: pandy Jun 16 2019, 08:33 PM

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.