The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Food and price on different line (mobile)
htmllama
post Jun 16 2019, 02:26 PM
Post #1





Group: Members
Posts: 1
Joined: 16-June 19
Member No.: 26,909



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 16 2019, 04:47 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 16 2019, 08:33 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 05:41 AM