Help with getting a menu in a div box to left align in a Mobile view

Author: Ross P.

Visited 1186, Followers 1, Shared 0

Tags: #divcoding,website x5 pro 2022.2

Hello again and sorry to be a nuisance about this but I have a problem with getting the menu to align to the left on the mobile version, are you able to help please.

Here is what I have added and what it looks like on a mobile:

Before closing the HEAD tag:

.toc li .title {
order: 1;
font-weight: bold;
}

.toc li .chapter {
order: 3;
}

.toc li::after {
background-image: radial-gradient(circle, currentcolor 1px, transparent 1.5px);
background-position: bottom;
background-size: 1ex 4.5px;
background-repeat: space no-repeat;
content: "";
flex-grow: 1;
height: 1em;
order: 2;
}

p {
text-align: left;
color:black;
}
</style>

HTML Code - DIV section

<li> CREAMY MUSHROOMS $23.00</li>
Toasted Ciabatta with Mushrooms, Poached Egg, Cream, Garlic & Toasted Pumpkin Seeds with Salsa Verde - V & NF
 
<li> GF - Gluten Free Bread $25.00</li>
<li> DF - Dairy Free Butter, Garlic Oil + Thyme Instead of Cream $23.00</li>
<li> Vegan - DF Option + No Egg $22.00</li> 
 
</ul>
</div>

<li> BEEF CHEEK HASH $25.00</li>
Smashed Potatoes, Beef Cheek, Cherry Tomatoes, Spinach, Topped with a Fried Egg & Creme Fraiche - GF & NF 
<li> DF - No Creme Fraiche or Substitute for Aioli. $25.00</li> 
 
</ul>
</div>

<li> AVOCADO + HALOUMI SMASH $24.00</li>
Toasted Ciabatta, Avocado + Pea Smash, Haloumi, Poached Egg, Pesto, Snow Pea Shoots with a Balsamic Glaze - V & NF
 
<li> GF - Gluten Free Bread $26.00</li>
<li> DF - Dairy Free Butter, Cherry Tomatoes Instead of Haloumi $24.00</li>
<li> Vegan - DF Option + No Egg $23.00</li> 
 
</ul>
</div>

<li> PASSENGERS BIG BREAKFAST $26.00</li>
Bacon, Sausage, Mushrooms, Smashed Potatoes & Two Eggs Your Way on Toasted Honey Linseed Bread with Tomato Relish - NF 
<li> GF - Gluten Free Bread $28.00</li>
<li> DF - Dairy Free Butter $26.00</li>
<li> Free Butter. Vegetarian - Swap Bacon & Sausage for Tomato & Spinach $25.00</li> 
 
</ul>
</div>

<li> THREE EGG OMELETTE $23.00</li>
with Bacon, Cheese & Tomato on Toast with a Side of Greens - NF 
<li> GF - Gluten Free Bread $25.00</li>
<li> DF - Dairv Free Butter + Dairy Free Cheese $25.00</li>
<li> Veg - Mushrooms Instead of Bacon $23.00</li> 
 
</ul>
</div>

<li> WARMED QUINOA SALAD $25.00</li>
Pan Seared Chicken Breast, Pumpkin, Feta, Pea, Mesclun and Toasted Seeds - GF & NF 
<li> DF - No Feta $25.00</li>
<li> Vegan - Seasonal Vegetables + No Feta $25.00</li> 
 
</ul>
</div>

<li> BEEF & BACON BURGER $26.00</li>
120gm Beef Pattie with Bacon, Cheese, Pickles, Slaw Our Special Burger Sauce. Served with Triple Cooked Chips & Tomato Sauce - NF 
<li> GF - Gluten Free Bun $28.00</li>
<li> DF - Gluten Free Option + Dairy Free Cheese $28.00</li>
 
</ul>
</div>

Mobile version image

If it helps you can view the website at: http://passengers.pagans.nz/

I am aware that I might be being a bit fussy here but also is there a way that on the mobile view the setting can be made to look something like this:

Free Butter. Vegetarian - Swap Bacon & Sausage
for Tomato & Spinach.......................................$25.00

Thanks once again for your help.

Kind regards

Ross

Posted on the 09/06/2022 02:19:57

Aleksej H.

Moderator

Hello. Try this:

.toc li .title {
text-align: left;
}

Posted on the 09/06/2022 04:57:12 from Aleksej H.

User
Author

Thank you Aleksej

Hopefully this time I have got it sorted.

Great work and appreciate any help I get with coding.

Posted on the 09/06/2022 07:59:31 from Ross P.