Highlighted

Bootstrap Columns issue when viewed on mobile device

New Here ,
Oct 23, 2017

Copy link to clipboard

Copied

I'm still learning this Bootstrap css so the answer is probably obvious. I have a menu page with a row and two columns. Everything works fine until it hits the xs parameter. The headers move outside their boxes and show up in random sections. Any help would be appreciated.

Link to page is here

.subHeaders {

font: bold 22px Tahoma, Geneva, sans-serif;

color: #000;

background: #FF6;

margin-left: -15px;

margin-right: -15px;

padding-left: 25px;

padding-top: 5px;

padding-bottom: 5px;

text-align: left;

display: block;

height: 40px;

Views

122

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Bootstrap Columns issue when viewed on mobile device

New Here ,
Oct 23, 2017

Copy link to clipboard

Copied

I'm still learning this Bootstrap css so the answer is probably obvious. I have a menu page with a row and two columns. Everything works fine until it hits the xs parameter. The headers move outside their boxes and show up in random sections. Any help would be appreciated.

Link to page is here

.subHeaders {

font: bold 22px Tahoma, Geneva, sans-serif;

color: #000;

background: #FF6;

margin-left: -15px;

margin-right: -15px;

padding-left: 25px;

padding-top: 5px;

padding-bottom: 5px;

text-align: left;

display: block;

height: 40px;

Views

123

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 23, 2017 0
osgood_ LATEST
LEGEND ,
Oct 24, 2017

Copy link to clipboard

Copied

Replace your menu list code with the code below: (it's your responsiblity to check the menu items and prices are correct).

You will see a handful of non-breaking spaces in the code - & nbsp; marked in red. (Make sure there is no space between the & and n - I had to leave a space otherwise the forum will delete the non-breaking space code completely.

<div class="container">

<div class="row">

<div class="col-md-6 products">

<h2>Sandwiches</h2>

<dl>

<dt>Hamburger</dt><dd>$2.30</dd>

<dt>Double Hamburger</dt><dd>$4.40</dd>

<dt>Cheeseburger <span>w/American Cheese</span></dt><dd>$2.45</dd>

<dt>Double Cheeseburger <span>w/American Cheese</span></dt><dd>$4.65</dd>

<dt>Royal Burger <span>Hamburger with lettuce, tomato & mayo</span></dt><dd>$2.60</dd>

<dt>Whoperburger <span>4oz. burger with lettuce, tomato & our own sauce</span></dt><dd>$3.85</dd>

<dt>Double Whoperburger</dt><dd>$7.25</dd>

<dt>California Veggie Patty Burger</dt><dd>$4.40</dd>

<dt>BLT w/Canadian Bacon</dt><dd>$2.75</dd>

<dt>Hot BBQ Beef Sandwich on toasted roll</dt><dd>$4.15</dd>

<dt>Pulled Pork Sandwich</dt><dd>$4.20</dd>

<dt>Rib Eye Steak Sandwich</dt><dd>$6.10</dd>

<dt>Lobster Roll</dt><dd>$7.95</dd>

<dt>Double Lobster Roll</dt><dd>$15.75</dd>

<dt>Crabmeat Roll</dt><dd>$5.75</dd>

<dt>Tuna Roll</dt><dd>$3.30</dd>

<dt>Grilled Hot Dog</dt><dd>$1.85</dd>

<dt>1/4 lb all beef Hot Dog</dt><dd>$3.30</dd>

<dt>Fresh Haddock Sandwich</dt><dd>$6.80</dd>

<dt>Fried Egg Sandwich</dt><dd>$1.75</dd>

<dt>Fried Egg and Bacon Sandwich</dt><dd>$3.80</dd>

<dt>Grilled Ham Sandwich</dt><dd>$2.55</dd>

<dt>Grilled Ham and Cheese Sandwich</dt><dd>$2.80</dd>

<dt>Grilled Cheese Sandwich</dt><dd>$1.60</dd>

<dt>Clam Cake Sandwich</dt><dd>$2.40</dd>

<dt>Crispy Chicken Breast Sandwich</dt><dd>$5.25</dd>

<dt>Grilled Chicken Breast Sandwich</dt><dd>$5.15</dd>

<dt>Chicken Salad Roll</dt><dd>$3.80</dd>

<dt>Maine Crab Cake Sandwich</dt><dd>$5.45</dd>

<dt>Lettuce & Tomato</dt><dd>extra .30¢</dd>

<dt>Maine Crab Cake Sandwich</dt><dd>extra .25¢</dd>

</dl>

<h2>Specials</h2>

<dl>

<dt>House Special...BLT w/Onion Rings</dt><dd>$5.80</dd>

<dt>Featured Chowder</dt><dd>$5.50</dd>

<dt>& nbsp;</dt><dd>& nbsp;</dd>

<dt><strong>Children's Special</strong></dt><dd>$3.40</dd>

<dt>Hot Dog Boat or Child size Hamburger or Grilled Cheese Served with golden brown fries & kiddie drink</dt><dd>& nbsp;</dd>

</dl>

</div>

<!-- end col-md-6 -->

<div class="col-md-6 products">

<h2>Baskets</h2>

<p>Served with golden french fries, and hot toasted rolls<br>

Substitute regular fries for onion rings or sweet potato fries add $1.30</p>

<dl>

<dt>Chicken Nugget Basket</dt><dd>$6.95</dd>

<dt>Crunchy Chicken Basket</dt><dd>$8.35</dd>

<dt>Southern Fried Chicken Basket</dt><dd>$8.95</dd>

<dt>Clam Cake Basket</dt><dd>$5.35</dd>

<dt>Maine Crab cake Basket</dt><dd>$11.45</dd>

<dt>Fried Shrimp Basket</dt><dd>$9.95</dd>

<dt>Fried Clam Basket whole in crumbs</dt><dd>Mkt. Price</dd>

<dt>Fried Scallop Basket</dt><dd>$14.95</dd>

<dt>Haddock Nuggets Basket</dt><dd>$8.25</dd>

<dt>Fresh Haddock Basket</dt><dd>$10.45</dd>

</dl>

<h2>Side Orders</h2>

<dl>

<dt>Golden French Fries</dt><dd>small $1.90</dd>

<dt>& nbsp;</dt><dd>large $2.10</dd>

<dt>Crisp Onion Rings</dt><dd>$3.15</dd>

<dt>Sweet Potato Fries</dt><dd>small $3.00</dd>

<dt>& nbsp;</dt><dd>large $3.35</dd>

<dt>Potato Skins <span>w/Cheddar Cheese or Sour Cream</span></dt><dd>$3.40</dd>

<dt>Mozzarella Cheese Stick</dt><dd>$5.25</dd>

<dt>Battered Green Beans <span>w/Sour Cream or Ranch</span></dt><dd>$3.75</dd>

<dt>Chicken Nuggets</dt><dd>pint $5.15</dd>

<dt>Chicken Fingers</dt><dd>$6.40</dd>

<dt>Golden Fried Clams whole in crumbs</dt><dd>pint Mkt. Price</dd>

<dt>Just Shrimp</dt><dd>$8.50</dd>

<dt>Just Haddock Nuggets</dt><dd>$7.35</dd>

<dt>1 Clam Cake</dt><dd>$2.15</dd>

<dt>1 Crab Cake</dt><dd>$5.20</dd>

<dt>Creamy Cole Slaw</dt><dd>$1.00</dd>

<dt>Side of Cheddar Cheesee</dt><dd>.85¢</dd>

<dt>Side of Sour Cream</dt><dd>.35¢</dd>

<dt>Extra Dipping Sauce</dt><dd>.25¢</dd>

</dl>

<h2>Beverages</h2>

<dl>

<dt>Coca-Cola, Diet Coke, Sprite, Diet Sprit, Root beer, Cherry</dt><dd>small $1.50</dd>

<dt>Coke, Orange, Ginger Ale, Pink Lemonade, Lemonade, Passion Fruit</dt><dd>large $1.70</dd>

<dt>Bottled Water</dt><dd>$1.80</dd>

<dt>Iced Coffee</dt><dd>small $1.10</dd>

<dt>Iced Tea</dt><dd>large $1.30</dd>

<dt>Raspberry Iced Tea</dt><dd>$X.XX</dd>

<dt>Milk</dt><dd>$1.80</dd>

<dt>Chocolate Milk</dt><dd>$1.95</dd>

<dt>Hot Coffee</dt><dd>$1.40</dd>

<dt>Hot Chocolate</dt><dd>$1.40</dd>

<dt>Hot Tea</dt><dd>$1.25</dd>

<dt>Frappes - 20oz Thick Western Frappes, Vanilla, Chocolate, Strawberry, Coffee, Banana, Black Raspberry, Mocha, Orange Cream, Blueberry</dt><dd>$3.55</dd>

</dl>

</div>

<!-- end col-md-6 -->

</div>

<!-- end row -->

</div>

<!-- end container -->

THEN USE THE CSS BELOW WHICH STYLES THE MENU LIST:

body {

font-family: helvetica, arial, sans-serif;

font-size: 14px;

font-weight: 400;

}

dl {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-ms-flex-pack: justify;

justify-content: space-between;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

margin: 20px 25px;

}

dt {

width: 80%;

font-weight: 400;

}

dt span {

font-size: 11px;

}

dd {

width: 20%;

text-align: right;

font-weight: 400;

}

.products h2 {

margin: 0;

padding: 0;

font-family: Tahoma, Geneva, sans-serif;

font-size: 24px;

background-color: #FFFF66;

padding: 15px 25px;

font-weight: 600;

}

.products p {

margin: 20px 25px 0 25px;

padding: 0;

font-size: 11px;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 24, 2017 1