Creating a menu category for a restaurant using CSS

I'm trying to set up a menu with categories like this: enter image description here

However, my result ends up looking like this: enter image description here

The description section keeps stacking on top of the photo section; it's strange because when I copied the code from the training materials, it worked perfectly. Am I missing something here?

Here's the code:

 <div id="main-content" class="container">
 <section class="row">
  <div class="menu-item-tile col-md-6">
    <div class="row">
      <div class="col-sm-5">
        <div class="menu-item-photo">
          <div>D01</div>
          <img class="img-responsive" width="250" height="150" src="images/menu/B/B-1.jpg" alt="Item">
        </div>
        <div class="menu-item-price">$10.95<span> (pint)</span> $14.95 <span>(quart)</span></div>
      </div>
      <div class="menu-item-description col-sm-7">
        <h3 class="menu-item-title">Veal with Mixed Vegetables</h3>
        <p class="menu-item-details">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque inventore esse minima incidunt impedit. Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.Asperiores, voluptatem. Sint aspernatur provident, rem odio dolorem eaque voluptatibus modi reprehenderit minima, itaque cupiditate totam.</p>
        <!--no matter the screen size changing, the ratio of photo remain col-sm-5 and description remain on col-sm-7-->
      </div>
    </div>
    <hr class="visible-xs">
  </div>

Answer №1

In my recommendation, I would advise against using bootstrap due to its lack of personalization and uniform appearance across websites.

Alternatively, I encourage you to explore the following resources: 1 & 2.

While they may not offer pre-made solutions, they serve as great starting points for your own customizations.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate dynamic HTML into Angular by adding CSS styling

Just starting out with Angular and have limited front-end experience. I'm feeling a bit lost on how to proceed. Currently, I have a mat-table with a static datasource (will connect to a database in the future), and I need to dynamically change the bac ...

Sending data from an HTML table hyperlink to a SQL query on a subsequent page

I am in need of assistance with passing a value from a database. I have successfully achieved this using drop-down boxes, selecting the option and then posting it with a submit button to populate tables in Display.php. However, my current task involves an ...

Tornadofx highlight selected row with CSS

I am attempting to modify the background color of a selected row and apply the same change to a listview. When I use cell{backgroundColor += Color.BLACK}, it successfully changes the color, but it does not retain the selection color as intended.I have al ...

Error encountered when trying to load Ajax script

As a beginner in the learning process, my code may appear messy. I am currently wrapping up my second project, which is a photo viewer. On the main page, there is a navigation system that loads different sections of the website using ajax. Since this proje ...

Eliminating and restoring the background in a form field when it is in focus

/* This function clears the default text in a field when clicked on */ $('#edit-field-activity-notes-und-0-value') .each(function() { $(this).data('default', this.value); var mybackground = $(this).css('backgroun ...

The Scrapy CSS selector is not fetching any prices from the list

Having trouble with the price CSS-selector while scraping an interactive website using Scrapy. Check out the HTML screenshot I captured: https://i.stack.imgur.com/oxULz.png Here are a few selectors that I've already experimented with: price = respon ...

Both Firefox and Chrome are unable to properly decode base64-encoded image or pdf files

I'm having trouble displaying base64 encoded images on Chrome and Firefox browsers using the data uri scheme. My current HTML code is: <img src="data:image/png;base64,base64_string_here" alt="base64 image name" width="600" height="400" border= ...

Click the "Add to Cart" button to make a purchase

Recently, I've been working on modeling an add to cart feature using jQuery. However, I have encountered a small issue that I'm trying to troubleshoot. When I click the mybtn button, the model displays and functions correctly, but there seems to ...

Reviewing user input for any inappropriate characters using jQuery's functionality

When a username is inputted into the input box, I want to make sure that only valid characters are accepted. The following code shows what I have so far; but what should I replace "SOMETHING" with in the regular expression? var numbers = new RegExp( ...

Tips for rearranging table columns using drag and drop in react js

I have been experimenting with various libraries to create a drag-and-drop feature for changing table columns order. Here is my current implementation: import React, { useState } from 'react'; import './list_de_tournees.css' const Table ...

step-by-step guide on transferring the text content of an HTML paragraph element to another HTML paragraph element through JavaScript in ASP.NET

I'm looking for help with passing the text value from one HTML paragraph element to another when a JavaScript function is called. The function loads a div element with an enlarged image and a paragraph content. Below is the code I am using: JavaScrip ...

retrieving the webpage's HTML content from the specified URL using AngularJS

Utilizing the $http.get('url') method to fetch the content located at the specified 'url'. Below is the HTML code present in the 'url': <html> <head></head> <body> <pre style = "word-wrap: break ...

Redirecting a CSS link on a website

I have a webpage with a "read more" option that redirects to the About Us page. When I click on "read more", the About Us page opens at the top, but I want it to redirect to the bottom of the About Us page. How can I achieve this? ...

The content within the iframe is not properly sized

I'm facing a challenge with an iframe that has a fixed height of 1000px which I am unable to adjust. I would like the content to fit within the iframe. As a CSS novice, I need some guidance on how to achieve this. Thank you! <iframe style="height: ...

Changing the font color of the status bar in a PWA on Chrome Desktop: A step-by-step guide

We recently developed a Progressive Web App (PWA) for our website and are now looking to customize the status bar font color to white. While we have come across various resources on how to change the background color of the status bar in a desktop PWA on ...

Verifying if a number is present in a textbox when inserting text (without using setTimeout)

I have an input field similar to the one shown below: <input type ="number" id="numberTxt" placeholder="Number Only"/> To ensure that the value entered is a number, I am using the following function with the keypress event: <script> ...

Initiating CSS3 animations when the display changes

In an attempt to incorporate CSS3 animations for fading elements in during page load, I am faced with the challenge of setting the element to display: none; and then back to display: block;. My goal is to exclusively apply the CSS3 animation upon the init ...

Expanding Material Ui menu to occupy the entire width of the page

I'm encountering an issue with a menu I created where I can't seem to adjust its height and width properly. It seems to be taking up the full width of the page. import React, { Component } from "react"; import Menu from "@material-ui/core/Menu"; ...

Remove 'File' option from the Menu in Tiny MCE

Is there a way to selectively remove the "File" option from the Menu Bar without specifying each individual menu item? https://i.sstatic.net/SFgvi.png I attempted the following method: menu: { edit: {title: 'Edit', items: 'undo redo | cut ...

How can I transfer CSS styles from one class to another using JQuery?

Is it possible for me to create a timepicker that matches the style of the datepicker in the current UI Theme? I am looking to replicate the CSS properties from the datepicker for my timepicker without copying any behavioral aspects. (Although there are o ...