What is the best way to center align my webpage horizontally for both mobile and desktop display?

I am having an issue with the alignment of the section on my website. How can I center align it horizontally for both mobile and desktop views? I attempted to use the center-align block elements by setting the left and right margins to auto, but that did not work. Here is how the website looks: https://i.sstatic.net/LyX1d.jpg - On desktop

For smaller screens: https://i.sstatic.net/ONtbo.jpg

Below are the index.html and CSS code snippets:

<!DOCTYPE html>
<html lang="en">

    <head>
      ... (head content)
    </head>

    <body>
        ... (navbar content)
        ... (search input and dropdown select filter)
        
        <section class="products">
            ... (product cards content)
        </section>
    
        <script src="sort.js"></script>
    </body>

</html>
  
    /*CSS Reset Styles*/

    html, body {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    /*Main Styles*/

    @import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500");
    body {
        margin: 0 auto;
        width: 90%;
        max-width: 1240px;
        font-family: "Roboto", sans-serif;
        background-color: #f6f6f6;
    }

    /*Typography Styles*/

    h1 {
        font-size: 28px;
        font-weight: 300;
        flex: 1;
    }

    h5 {
        font-weight: 500;
        line-height: 1.7em;
    }

    h6 {
        color: #666;
        font-size: 14px;
    }

    /*Product Layout Styles*/

    .product-filter {
        display: flex;
        padding: 30px 0;
    }

    ... (more CSS styles)

Answer №1

It seems like you may need to adjust your usage of Bootstrap. I suggest taking a look at the basics on their website starting from this page:

https://getbootstrap.com/docs/4.5/layout/overview/

In response to your question about centering content in Bootstrap, the key class to achieve this is 'container'. You are already utilizing it within the navigation element, which explains why it appears centered.

To center both sections of your website effectively, consider implementing the following solution:

<div class="container"> - This container tag was added for structure 
  <!-- End Navbar Section -->
  <table width="20%">
    <tr>
      <td style="padding-right: 10px;">
        <input type="text" id="Search" onkeyup="myFunction()" placeholder="Please enter a search term.."
          title="Type in a name" />
      </td>
    </tr>
  </table>

  <label>Price:</label>
  <select onchange="doSomething(event)" id="myDropdown">
    <option selected="selected" disabled="disabled">-- Select an option --</option>
    <option value="Lowest to Highest">Lowest to Highest</option>
    <option value="Highest to Lowest">Highest to Lowest</option>
  </select>


 
  <section class="products">

    <div class="product-card">
      <div class="product-image">
        <img src="assets/img/coat-01.jpeg" />
      </div>
      <div class="product-info">
        <h5>Summer</h5>
        <h6>$82.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="assets/img/coat-02.jpeg" />
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$19.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="assets/img/coat-03.jpeg" />
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$1009.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="assets/img/coat-04.jpeg" />
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$49.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="assets/img/coat-05.jpeg" />
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$23</h6>
      </div>
    </div>
    </div> - The closing container tag was included for clarity 

Furthermore, make sure to review your code for any unclosed elements such as that require attention.

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

When running `node compile.js`, no combined CSS file is being created

I have finally mastered the art of setting up and executing the "node compile.js" file in the claro theme folder to compile each *.less file into its corresponding *.css file. However, I noticed that the old claro.css file remains unchanged. Is this the in ...

Guide to utilizing a download link for file retrieval in Python

I'm currently working on creating a script that can automatically download specific files from webpages and save them to designated folders. For the most part, I've been successful in achieving this using Python, Selenium, and FirefoxPreferences ...

Python: The soup/parser module is unable to locate the element with the id "div"

I am facing a challenge locating anything within the "div" with the id "bbOffers" (including the div itself) on this particular page: from bs4 import BeautifulSoup from urllib.request import urlopen url = "https://lubimyczytac.pl/ksiazka/5076165/fute ...

Error encountered: Unrecognized media in CSS validation and parsing issue

I've been having trouble validating my CSS and keep encountering error messages. Despite ensuring I have closing brackets, there are parse errors on line 39 and unrecognized media issues on lines 79 and 81. Additionally, lines 70 and 89 also trigger p ...

Code written in Javascript runs before any CSS files are downloaded and processed

While researching async scripting in web applications, I stumbled upon an interesting article. Essentially, it suggests that JavaScript scripts are not executed until all stylesheet CSS files are downloaded and parsed. Intrigued by this concept, I decided ...

Unable to successfully implement the Bootstrap dropdown feature in my header upon switching pages

Utilizing Ruby on Rails and Bootstrap 5.3 to develop a website for showcasing my projects and information. I have a header file that contains all of the navbar code. Once I visit any link from one of the dropdown options, the dropdown button stops function ...

When the class is not present, simply scroll to the specified div

Having trouble getting the jQuery scroll to function properly in the following code snippet. Essentially, I want to display a button named #checking when the class k.state-disabled is not active. After the button is displayed for the first time, I aim to ...

I am interested in utilizing css to establish an iframe as a background

Hello fellow programmers on stackoverflow, I am curious if it is feasible to utilize an iframe as a background using CSS? Allow me to elaborate: Currently, I have a div named "lead" on my website. Whenever this div is used in my HTML files, the image ...

What is the best way to choose the first parent element that includes a specific class within it?

I am searching for a method to identify the initial parent element that includes another element with a specified class within it. For instance: <div class="wrapper"> <div class="item"> <div class="inner-eleme ...

What is the best way to utilize the @Import CSS rule in my code?

After using CSS for a considerable amount of time, I have successfully utilized the @import rule in the past. However, I am currently encountering an issue with it on a new project. Is there anyone who can offer assistance? Here is the code: @import url(&a ...

Pictures acting erratic following the implementation of two setTimeout functions

I encountered an issue while developing a pong game using html/css/javascript. Everything was going smoothly until I introduced a second setTimeout() function. Here is the snippet of my html code: <!DOCTYPE html> <html> <head> <scrip ...

In IE8, a border is applied to the max-width property when the width is set to

I'm attempting to design a box that adjusts in size according to the parent container, utilizing a mix of max-width and width:100%. With this setup, the box's width is determined by the max-width property, ensuring it shrinks within its boundari ...

Concealing unnecessary borders on list elements using jQuery

Here is the code I am working with: http://jsfiddle.net/eLyJA/ I am looking to calculate and eliminate all border edges to achieve this visual effect: ...

Encountered an error saying "Unable to locate property '0' of undefined" while trying to access an environment variable in MongoDB

I am attempting to access a variable that is defined in my JavaScript code. This variable holds data fetched from a MongoDB using a GET request. The entire database is stored under this variable and then read by the HTML for display. The output of the GET ...

What is preventing my content from showing up when clicked like this?

I have created a javascript script to reveal hidden content, but for some reason it is not working when I click on it. Can anyone provide assistance? Below is the script I am using: <script src="style/jquery/jquery.js"></script> <script> ...

Is there a way to extract an email address from a database and have it securely and seamlessly added to the recipient field of an email service provider?

I'm currently working on a program that allows an admin to easily select a group of email addresses from a database. Once the admin clicks on a submit button, Yahoo will automatically open and the email addresses will be inserted into the receiver tex ...

Tips for creating a perfectly positioned v-overlay within a v-col component

When using an absolute v-overlay inside a v-col, the grandparent v-row is covered by the overlay instead of just the parent v-col. "Absolute overlays are positioned absolutely and contained inside their parent element." -According to Vuetify&apo ...

Adding Dynamic Shadow to Bootstrap 4 Card

I've been trying to figure out how I can add an animated shadow effect to a Bootstrap 4 Card. Currently, my Cards are arranged like this: Image of Bootstrap Card My objective is to create an animated shadow around the card similar to the one shown i ...

Two CSS Issues - One specific to mobile devices, the other unique to Chrome browser

Having trouble with the top banner not stretching all the way on iPhone. Any solutions? Here's a screenshot for reference: Below is the CSS applied to the div: #banner { background-color: #F7F7F7; background-size: cover; box-shadow: 0 0 ...

On a split button click with a popup, eliminate an item from a listView

I have successfully figured out how to remove a list item from a listview upon split-button click, as demonstrated in this jsfiddle Here is the code snippet: $('#produsele').children('li').on('click', function () { var s ...