Locations

. I am attempting to replicate this webpage. enter image description here Here is th" /> Locations

. I am attempting to replicate this webpage. enter image description here Here is th" /> Locations

. I am attempting to replicate this webpage. enter image description here Here is th"/>
DEVHIDE
Login Or Sign up

Having trouble centering text that has an ID of "locations" It is located in the "locationbox" class

22 Views Asked by At

I am having trouble centering the <p id="locations">Locations</p> .

I am attempting to replicate this webpage. enter image description here


Here is the HTML code that I have:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tea Cozy Project</title>

   
  <!--  <link rel="stylesheet" href="styles.css">     -->  

  <link rel="stylesheet" href="stylesheet.css">

</head>


<body>
    
   <!--NAVIGATION-->


        <nav class="navigation">


            <ul>
                <li>Mission</li>
                <li>Featured Tea</li>
                <li>Locations</li>
            </ul>
        </nav>
   


<!--Mission Statement BEGINS-->
        <div class="mission">
            <div class="statement">
                <h2>Our Mission</h2> 
             
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>

        </div>



 <!--TEA OF THE MONTH BEGINS-->       
    
 <div>

    <div class="teaintro">
            

            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
    </div>
        <br>
   
        

    <div class="teaofthemonth1" id="teadivs">        
        <!--TEA IMAGES SET 1-->

        <div class="image-container" id="teas">
            <img src="images/3BerryBlitz.webp" alt="Berry Blitz" width="300px" height="200px">
            <p>Fall Berry Blitz Tea</p>
        </div>


        <div class="image-container" id="teas" >
            <img src="images/8SpicedRum.jpeg" alt="Berry Blitz" width="300px" height="200px">
            <p>Spiced Rum Tea</p>
        </div>



        <div class="image-container" id="teas">
            <img src="images/4Donut.jpeg" alt="Seasonal Donuts" width="300px" height="200px">
            <p>Seasonal Donuts</p>
        </div>


    </div>    


    <div class="teaofthemonth2" id="teadivs">  
   
        <div class="image-container" id="teas">
            <img src="images/7MyrtleAve.jpeg" alt="Myrtle Ave Tea" width="300px" height="200px">
            <p>Myrtle Ave Tea</p>
        </div>



        <div class="image-container" id="teas">
            <img src="images/2BedfordBizarre.jpeg" alt="Bedford Bizarre Tea" width="300px" height="200px">
            <p>Bedford Bizarre Tea</p>
        </div>

   
    </div>  
   


</div>
    




<!--LOCATIONS BEGIN-->

    
<div class="locationbox">


    <p id="locations">Locations</p>
      
        <div class="lcnbox">
                <h3><b>Downtown</b> <br>
                    384 West 4th Street <br>
                    Suite 108 <br>
                    Portland, Maine <br>
                </h3>
        </div>
    


        <div class="lcnbox">
            <h3><b>East Bayside</b> <br>
                3433 Phisherman's Avenue <br>
                (Northwest Corner)<br>
                Portland, Maine <br>
            </h3>
        </div>



        <div class="lcnbox">
            <h3><b>Oakdale</b><br>
                515 Crescent Avenue<br>
                Second Floor<br>
                Portland, Maine <br>
            </h3>
        </div>

    </div>

</div>





    <!--CONTACT INFORMATION-->

        <div class="teacozy">
            
            <h2>The Tea Cozy</h2>
           

            <h5>[email protected]
                <br>
                917-555-8904
            </h5>
        </div>

 



<!--FOOTER-->

<footer>

    <p>copyright The Tea Cozy 2017</p>

</footer>


</body>

</html>





Here is the CSS code that I have:
/*   NAVIGSTION SECTION   */


li {
    display: inline;
    text-decoration: underline;

}





/*   MISSION SECTION   */

.mission {
    display: flex;
    background-image: url('/images/6Background.webp');
    height: 700px;
    width: 1200px;
    border-bottom: 1px solid seashell;
}


.statement {
    background-color: black;
    height: 100px;
    width: 1200px;
    margin-top: 250px;
    color: seashell;
    font-family: Helvetica;
    text-align: center;
}





/* TEA SECTION*/

.teaintro {
    text-align:  center;
}



.teaofthemonth1,
.teaofthemonth2 {
  display: flex;
  flex-direction: row; /* Arrange items in a row */
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
}


.image-container {
    margin: 20px;
}



/* LOCATION SECTION*/

.locationbox {
    display: flex;
    background-image: url('images/5Locations.webp');
    background-size: contain;
   
}


.locationbox #locations {
    display: flex;
    flex-direction: row; /* Arrange items in a row */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
  }  




.lcnbox {
    font-family: Helvetica;
    text-align: center;
    margin: 100px 40px;
    color: seashell;
    width: 300px;
    height: 300px;
    background-color: black;
    line-height: 3.0;
}




/*TEA COZY CONTACT INFORMATION*/


.teacozy {
    margin-left: 500px;
    display: block;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap; /* or wrap, wrap-reverse */
  }

I've tried adjusting the display flex to inline and it doesn't work. I've tried adding margin-left to move that text but when I do that it moves all of the items in that specific div.

html css visual-studio replicate
Original Q&A
1

There are 1 best solutions below

0
cool-guy On

The positioning of the elements in your code is causing the problem,the easiest way to deal with it is by using a grid layout.

1.In html add a new <div> which will contain the lcnbox only. here i added a new <div> with class="locationbox-inside" which will contain the lcnbox so that its easy to place everything.

  <div class="locationbox">
    <p id="locations">Locations</p>
    <div class="locationbox-inside">
      <div class="lcnbox">
        <h3><b>Downtown</b> <br> 384 West 4th Street <br> Suite 108 <br> Portland, Maine <br>
        </h3>
      </div>



      <div class="lcnbox">
        <h3><b>East Bayside</b> <br> 3433 Phisherman's Avenue <br> (Northwest Corner)<br> Portland, Maine <br>
        </h3>
      </div>



      <div class="lcnbox">
        <h3><b>Oakdale</b><br> 515 Crescent Avenue<br> Second Floor<br> Portland, Maine <br>
        </h3>
      </div>

    </div>
  </div>

2.Then in css i changed these:

/* LOCATION SECTION*/

.locationbox {
  display: grid;
  background-image: url('images/5Locations.webp');
  background-size: contain;
  place-items: center;
}

.locationbox-inside {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: auto auto auto;
}

.locationbox #locations {
  margin: 15px 0px;
}

.lcnbox {
  font-family: Helvetica;
  text-align: center;
  color: seashell;
  width: 300px;
  aspect-ratio: 1/1;
  height: 300px;
  background-color: black;
  line-height: 3.0;
}

here i have added many changes:

  • added aspect-ratio property:this will keep the aspect-ratio.
  • removed the margin in .lcnbox
  • removed everything related to flex from .locationbox #locations and added margin: 15px 0px; only.
  • added style to .locationbox-inside:added grid layout and positioned it also added grid-gap:40pxas required in the image your provided.
  • added grid layout to .locationbox to position everything perfectly.(by removing flex) also added place-items:center(a grid property) to place everything in the center.
  • as provided in the image if you want to make .locationbox to take the entire height,you could try setting its height:100vh; or use any other methods. 
    /*   NAVIGSTION SECTION   */

li {
  display: inline;
  text-decoration: underline;
}


/*   MISSION SECTION   */

.mission {
  display: flex;
  background-image: url('/images/6Background.webp');
  height: 700px;
  width: 1200px;
  border-bottom: 1px solid seashell;
}

.statement {
  background-color: black;
  height: 100px;
  width: 1200px;
  margin-top: 250px;
  color: seashell;
  font-family: Helvetica;
  text-align: center;
}


/* TEA SECTION*/

.teaintro {
  text-align: center;
}

.teaofthemonth1,
.teaofthemonth2 {
  display: flex;
  flex-direction: row;
  /* Arrange items in a row */
  justify-content: center;
  /* Center items horizontally */
  align-items: center;
  /* Center items vertically */
}

.image-container {
  margin: 20px;
}


/* LOCATION SECTION*/

.locationbox {
  display: grid;
  background-image: url('images/5Locations.webp');
  background-size: contain;
  place-items: center;
}

.locationbox-inside {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: auto auto auto;
}

.locationbox #locations {
  margin: 15px 0px;
}

.lcnbox {
  font-family: Helvetica;
  text-align: center;
  color: seashell;
  width: 300px;
  aspect-ratio: 1/1;
  height: 300px;
  background-color: black;
  line-height: 3.0;
}


/*TEA COZY CONTACT INFORMATION*/

.teacozy {
  margin-left: 500px;
  display: block;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  /* or wrap, wrap-reverse */
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tea Cozy Project</title>


  <!--  <link rel="stylesheet" href="styles.css">     -->

  <link rel="stylesheet" href="stylesheet.css">
</head>


<body>

  <!--NAVIGATION-->


  <nav class="navigation">


    <ul>
      <li>Mission</li>
      <li>Featured Tea</li>
      <li>Locations</li>
    </ul>
  </nav>



  <!--Mission Statement BEGINS-->
  <div class="mission">
    <div class="statement">
      <h2>Our Mission</h2>

      <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
    </div>

  </div>



  <!--TEA OF THE MONTH BEGINS-->

  <div>

    <div class="teaintro">


      <h2>Tea of the Month</h2>
      <h4>What's Steeping at The Tea Cozy?</h4>
    </div>
    <br>



    <div class="teaofthemonth1" id="teadivs">
      <!--TEA IMAGES SET 1-->

      <div class="image-container" id="teas">
        <img src="images/3BerryBlitz.webp" alt="Berry Blitz" width="300px" height="200px">
        <p>Fall Berry Blitz Tea</p>
      </div>


      <div class="image-container" id="teas">
        <img src="images/8SpicedRum.jpeg" alt="Berry Blitz" width="300px" height="200px">
        <p>Spiced Rum Tea</p>
      </div>



      <div class="image-container" id="teas">
        <img src="images/4Donut.jpeg" alt="Seasonal Donuts" width="300px" height="200px">
        <p>Seasonal Donuts</p>
      </div>


    </div>


    <div class="teaofthemonth2" id="teadivs">

      <div class="image-container" id="teas">
        <img src="images/7MyrtleAve.jpeg" alt="Myrtle Ave Tea" width="300px" height="200px">
        <p>Myrtle Ave Tea</p>
      </div>



      <div class="image-container" id="teas">
        <img src="images/2BedfordBizarre.jpeg" alt="Bedford Bizarre Tea" width="300px" height="200px">
        <p>Bedford Bizarre Tea</p>
      </div>


    </div>



  </div>





  <!--LOCATIONS BEGIN-->


  <div class="locationbox">
    <p id="locations">Locations</p>
    <div class="locationbox-inside">
      <div class="lcnbox">
        <h3><b>Downtown</b> <br> 384 West 4th Street <br> Suite 108 <br> Portland, Maine <br>
        </h3>
      </div>



      <div class="lcnbox">
        <h3><b>East Bayside</b> <br> 3433 Phisherman's Avenue <br> (Northwest Corner)<br> Portland, Maine <br>
        </h3>
      </div>



      <div class="lcnbox">
        <h3><b>Oakdale</b><br> 515 Crescent Avenue<br> Second Floor<br> Portland, Maine <br>
        </h3>
      </div>

    </div>
  </div>





  <!--CONTACT INFORMATION-->

  <div class="teacozy">

    <h2>The Tea Cozy</h2>


    <h5>[email protected]
      <br> 917-555-8904
    </h5>
  </div>





  <!--FOOTER-->

  <footer>

    <p>copyright The Tea Cozy 2017</p>

  </footer>


</body>

</html>

Related Questions in HTML

Related Questions in CSS

Related Questions in VISUAL-STUDIO

Related Questions in REPLICATE

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Popular Questions

.

Copyright © 2021 Jogjafile Inc.