Could there be a coding issue stopping <div class="rating"> from aligning more centrally along the horizontal axis on the screen?

Just wondering, could there be something in my code that's preventing 

<div class="rating">
from moving closer to the center? And is there a way to make it move closer horizontally? (On a side note, CSS layout and positioning still puzzle me. I struggle to understand when setting margins or widths will impact the position/layout and prevent it from behaving as desired.)

(2) Also, why isn't 

<div class="title">
within the viewport when the window isn't maximized? Any suggestions on how to fix this?

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

body {
  font-family: 'Spartan', sans-serif;
  font-size: 15px;
}

.container {
    height: 100vh;
    background-image: url('./images/bg-pattern-top-desktop.svg');
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    display: flex;
    flex-direction: column;
    width: 77%;
}

.top {
    display: flex;
    flex-direction: row;
}

.title {
    color: hsl(300, 43%, 22%);
    width: 25%;
    margin: auto;
}


.stars {
    display: inline;
    margin-right: 30px;
    }

.rating {
    color: hsl(300, 43%, 22%);
    font-weight: bold;
    white-space: nowrap;
    background-color: hsl(300, 24%, 96%);
    padding: 15px 50px 15px 25px;
    border-radius: .5em;
    margin: 10px;
}

.bottom {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
}

.comment {
    background-color: hsl(300, 43%, 22%);
    border-radius: .5em;
    color: white;
    padding: 25px;
    margin: 15px;
}

.comment span {
    color: hsl(333, 80%, 67%);
}

.comment p {
    font-weight: lighter;
    padding-top: 20px;
}

.author img {
    border-radius: 50em;

}
<body>
    <div class="container">
      <div class="content">
        <div class="top">
          <div class="title">
            <h1>10,000+ of our users love our products.</h1>
            <p>
              We only provide great products combined with excellent customer service.
              See what our satisfied customers are saying about our services.
            </p>
          </div>
         
          <div class="spacer"></div>

          <div class="ratings">
            <div class="rating">
              <div class="stars">
                <img src="images/icon-star.svg" alt="star" />
                                <img src="images/icon-star.svg" alt="star" />
                                <img src="images/icon-star.svg" alt="star" />
                                <img src="images/icon-star.svg" alt="star" />
                                <img src="images/icon-star.svg" alt="star" />
              </div>
              <span>Rated 5 Stars in Reviews</span>
            </div>
            <div class="rating">
              <div class="stars">
                <img src="images/icon-star.svg" alt="star" />
                                <img src="images/icon-star.svg" alt="star" />
                                <img src="images/icon-star.svg" alt="star" />
                                <img src="images/icon-star.svg" alt="star" />
                                <img src="images/icon-star.svg" alt="star" />
              </div>
              <span>Rated 5 Stars in Report Guru</span>
            </div>
            <div class="rating">
              <div class="stars">
                <img src="images/icon-star.svg" alt="star" />
                                <img src="images/icon-star.svg" alt="star" />
                                <img src="images/icon-star.svg" alt="star" />
                                <img src="images/icon-star.svg" alt="star" />
                                <img src="images/icon-star.svg" alt="star" />
              </div>
              <span>Rated 5 Stars in BestTech</span>
            </div>
          </div>
        </div>
        
        <div class="bottom">
          <div class="comment">
            <div class="author">
              <img src="images/image-colton.jpg" alt="colton" />
              <div class="profile">
                <div class="name">Colton Smith</div>
                <span>Verified Buyer</span>
              </div>
            </div>
            <p>
              "We needed the same printed design as the one we had ordered a week prior. Not only did they find the original order, but we also received it in time.
                            Excellent!"
            </p>
          </div>
          <div class="comment">
            <div class="author">
              <img src="images/image-irene.jpg" alt="irene" />
              <div class="profile">
                <div class="name">Irene Roberts</div>
                <span>Verified Buyer</span>
              </div>
            </div>
            <p>
              "Customer service is always excellent and very quick turn around. Completely delighted with the simplicity of the purchase and the speed of delivery."
            </p>
          </div>
          <div class="comment">
            <div class="author">
              <img src="images/image-anne.jpg" alt="anne" />
              <div class="profile">
                <div class="name">Anne Wallace</div>
                <span>Verified Buyer</span>
              </div>
            </div>
            <p>
              "Put an order with this company and can only praise them for the very high standard. Will definitely use them again and recommend them to everyone!"
            </p>
          </div>
          </div>
        </div>
      </div>         
    </div>
  </body>

htmlcssmedia-queries

Answer №1

To ensure that .container has room to grow, change height: 100vh to min-height: 100vh. Currently, with a fixed height of 100vh, the content overflows.

Additionally, add justify-content: center to .top and remove margin: auto from .title to shift the ratings further left:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Spartan', sans-serif;
  font-size: 15px;
}

.container {
  min-height: 100vh;
  background-image: url('./images/bg-pattern-top-desktop.svg');
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  display: flex;
  flex-direction: column;
  width: 77%;
}

.top {
  display: flex;
  justify-content: center;
}

.title {
  color: hsl(300, 43%, 22%);
  width: 25%;
}

.stars {
  display: inline;
  margin-right: 30px;
}

.rating {
  color: hsl(300, 43%, 22%);
  font-weight: bold;
  white-space: nowrap;
  background-color: hsl(300, 24%, 96%);
  padding: 15px 50px 15px 25px;
  border-radius: .5em;
  margin: 10px;
}

.bottom {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}

.comment {
  background-color: hsl(300, 43%, 22%);
  border-radius: .5em;
  color: white;
  padding: 25px;
  margin: 15px;
}

.comment span {
  color: hsl(333, 80%, 67%);
}

.comment p {
  font-weight: lighter;
  padding-top: 20px;
}

.author img {
  border-radius: 50em;
}
<body>
  <div class="container">
    <div class="content">
      <div class="top">
        <div class="title">
          <h1>10,000+ of our users love our products.</h1>
          <p>
            We only provide great products combined with excellent customer service. See what our satisfied customers are saying about our services.
          </p>
        </div>

        <div class="spacer"></div>

        <div class="ratings">
          <div class="rating">
            <div class="stars">
              <img src="images/icon-star.svg" alt="star" />
              <img src="images/icon-star.svg" alt="star" />
              <img src="images/icon-star.svg" alt="star" />
              <img src="images/icon-star.svg" alt="star" />
              <img src="images/icon-star.svg" alt="star" />
            </div>
            <span>Rated 5 Stars in Reviews</span>
          </div>
          <div class="rating">
            <div class="stars">
              <img src="images/icon-star.svg" alt="star" />
              <img src="images/icon-star.svg" alt="star" />
              <img src="images/icon-star.svg" alt="star" />
              <img src="images/icon-star.svg" alt="star" />
              <img src="images/icon-star.svg" alt="star" />
            </div>
            <span>Rated 5 Stars in Report Guru</span>
          </div>
          <div class="rating">
            <div class="stars">
              <img src="images/icon-star.svg" alt="star" />
              <img src="images/icon-star.svg" alt="star" />
              <img src="images/icon-star.svg" alt="star" />
              <img src="images/icon-star.svg" alt="star" />
              <img src="images/icon-star.svg" alt="star" />
            </div>
            <span>Rated 5 Stars in BestTech</span>
          </div>
        </div>
      </div>

      <div class="bottom">
        <div class="comment">
          <div class="author">
            <img src="images/image-colton.jpg" alt="colton" />
            <div class="profile">
              <div class="name">Colton Smith</div>
              <span>Verified Buyer</span>
            </div>
          </div>
          <p>
            "We needed the same printed design as the one we had ordered a week prior. Not only did they find the original order, but we also received it in time. Excellent!"
          </p>
        </div>
        <div class="comment">
          <div class="author">
            <img src="images/image-irene.jpg" alt="irene" />
            <div class="profile">
              <div class="name">Irene Roberts</div>
              <span>Verified Buyer</span>
            </div>
          </div>
          <p>
            "Customer service is always excellent and very quick turn around. Completely delighted with the simplicity of the purchase and the speed of delivery."
          </p>
        </div>
        <div class="comment">
          <div class="author">
            <img src="images/image-anne.jpg" alt="anne" />
            <div class="profile">
              <div class="name">Anne Wallace</div>
              <span>Verified Buyer</span>
            </div>
          </div>
          <p>
            "Put an order with this company and can only praise them for the very high standard. Will definitely use them again and recommend them to everyone!"
          </p>
        </div>
      </div>
    </div>
  </div>
  </div>
</body>

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

What is the reason behind certain websites not displaying a .php extension at the end of their file names?

There are times when I notice that a website's URL is structured like this: www.website.com/index.php while other times it appears like this: www.website.com/index/ What is the reason for the absence of a .php or .html extension in the second URL? ...

phphtmlurl

Calculate the total price using jQuery

I’m a beginner in JavaScript and I’ve hit a roadblock. I have a plus and minus button that adds up product quantities, but I need the total price to reflect this as well. Some products can only be purchased in multiples of 2, 5 or 10. Here is the HTML ...

javascriptjqueryhtml

Eradicate white space in a JavaScript code

Calling all JS programmers! Here's a challenge for you, check out this demo: https://codepen.io/gschier/pen/jkivt I'm looking to tweak 'The pen is simple.' to be 'The pen issimple.' by removing the extra space after 'is& ...

javascripthtmlcss

The functionality of the Bootstrap tabbed pane is not functioning correctly

I am currently in the process of creating a modal tabbed pane in bootstrap following the instructions provided in this guide. You can view the code and functionality on this fiddle. $(document).on("click","#tabs a",function(event) { alert("!!!"); ...

javascriptjquerycsstwitter-bootstrap

Modify the styling of the main webpage using the iframe

Can the CSS of a parent page be modified from an iframe when the parent page and iframe are hosted on separate domains? ...

jqueryhtmlcss

What steps can I take to update this HTML document and implement the DOM 2 Event Model?

I'm struggling with converting my document from the DOM 0 Event model to the DOM 2 Event model standards. I've tried getting help from different tutors on Chegg, but no one seems to have a solution for me. Hoping someone here can assist me!:) P. ...

javascripthtmleventsdommodel

Tips for customization: Altering HTML table borders and column widths

I am looking to update the appearance of an HTML table. Currently, it looks like this: Here is the code snippet: <div className="student-schedule"> <table className="student-calendar-table"> [...] </table&g ...

htmlcssreactjshtml-table

Using JavaScript to modify a section of an anchor link attribute

I am looking to dynamically update part of the URL when a specific radio button is selected. There are three purchase links, each representing a different amount. After choosing an animal, I need to select one of the three amounts to spend. How can I modi ...

javascripthtmlhref

Encountering challenges while integrating Angular with a Laravel forum creation project

Currently, I am working on building a forum application that involves users, posts, and comments using Laravel. However, the next step in my project requires integrating Angular, which is new territory for me and I'm not sure where to start. I have a ...

phphtmlangularlaraveltypescript

Challenge involving CSS and Javascript for solving puzzles

In my attempt to create a puzzle with 2 rows and 3 columns using CSS and JavaScript, I envision the pieces of the puzzle being black and cut into various shapes. The objective is for users to drag these pieces onto the board in order to complete it. I have ...

javascripthtmlcss

Removing scrollbar from table in React using Material UI

I successfully created a basic table using react and material UI by following the instructions found at: https://material-ui.com/components/tables/#table. The table is functioning properly, but I am finding the scrollbar to be a bit inconvenient. https:// ...

htmlcssreactjstypescriptmaterial-ui

What could be the reason for the HTML canvas not displaying anything after a new element is added?

How come the HTML canvas stops showing anything after adding a new element? Here is my HTML canvas, which works perfectly fine until I add a new element to the DOM: <canvas class="id-canvas", width="1025", height="600"> ...

javascripthtmldomcanvas

Refreshing page using jQuery following an AJAX request

My script is functioning properly, however the use of location.reload(); does not seem to be effective. I am aiming to refresh the page after deselecting the last checkbox. $(".catcf, .coursetype, .yearcf, .manthcf, .venucf").on('click' ...

htmljqueryajax

Tips on how to make a <li> element float independently without impacting other elements on the page

I have a dilemma with two divs in my HTML code. One is designated for the menu, and the other is simply for the title. The issue arises when I attempt to float the <li> items next to each other within the menu; they end up shifting downwards from the ...

csscss-float

What could be causing the incorrect display of updates when my Grails checkbox onclick remote function Ajax call is triggered

Hi, I have a page named taskReminder that renders two templates: one for tasks and another for reminders. The task template includes a checkbox that, when checked, should update the task list. Everything is functioning correctly, but there seems to be an i ...

ajaxgrailshtmlcheckboxupdatepanel

What is the most efficient method for identifying and modifying an element's in-line style while performing a swipe gesture?

Recently, I've been developing a left swipe gesture handler for chat bubbles. Implementing touchMove and touchStart seems like the logical next step, but for now, I'm focusing on making it work seamlessly for PC/web users. I managed to make it f ...

javascriptcssreactjs

Implementing a vertical tabindex change in Material UI Dialogue table

My material UI dialogue contains a table: <Dialog open={open} onClose={handleClose} maxWidth={'xl'} aria-labelledby='scroll-dialog-title' aria-describedby='scroll-dialog-description' disa ...

javascriptcssreactjsmaterial-ui

How to align all children at flex-start while positioning one child at the end?

I am currently working on a flex container that has 3 children. My goal is to have all the children align at flex-start, with the final child positioned at the bottom of the container. Can align-content be combined with align-self to achieve this layout? ...

cssflexbox

The total height of the document's body in jQuery is not equal to the sum of the viewport height and the window's scroll top position at the bottom of the document

Why does the document height appear smaller than the window scroll top value plus the viewport height when I reach the end of the document? Shouldn't they be equal? I've been struggling with this issue for hours and can't seem to figure it o ...

javascriptjqueryhtmlcssscrolltop

Adjust the height for just one md-tab

Looking to find a way to set the height of the content within an <md-tab> element to be 100% in a flexible manner. For example, consider the following structure: <body> <md-content> <md-tabs> <md-tab label= ...

javascripthtmlcssangularjsangularjs-material