CODEWITHSUNDEEP
cssresponsive-designmedia-querieswidthmargin
roberto
roberto

Reputation: 1

How to horizontally align my elements for tablet layout?

I want to have three different layouts of my web page for different browser widths (i.e. desktop, tablet, phone). In the tablet layout (between 768px and 991px of the browser) I should have three elements, two in the first row (thus each of them taking 6/12 of the browser width) and the a third in the second row (taking 12/12 of the browser width). This is what I want: What I want - IMAGE But I have a problem with this layout: I am not able to set the third element borders aligned with the left and right borders of first and second element, as you see. This is what I have done: What I have - IMAGE Can you help me? Note: I want the element '3' wide as '1'+'2' width only for tablet layouts! For other layouts I want what I already did, i.e same width for every element (1,2 or 3).

This is the html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Our Menu</title>
<link rel ="stylesheet" href="css/style.css">
</head>
<body>
<h1>Our Menu</h1>

<div class="row">
  <div class="col-lg-4 col-md-6 col-sd-12 anchor">
    <p class="content"> In girum imus nocte et consimur igni.</p>
    <p class="my-title" id="p1"> Chicken</p>
  </div>
  <div class="col-lg-4 col-md-6 col-sd-12 anchor">
    <p class="content"> In girum imus nocte et consimur igni.</p>
    <p class="my-title" id="p2">  Beef</p>
  </div>
  <div class="col-lg-4 col-md-12 col-sd-12 anchor">
    <p class="content"> In girum imus nocte et consimur igni.</p>
    <p class="my-title" id="p3"> Sushi</p>
  </div>
</div>

</body>
</html>

This is the css:

/* width and height will include border and padding */
* {
  box-sizing: border-box;
}
h1 {
  margin-bottom: 15px;
  text-align: center;
}

/*Set an anchor for the container of p elements*/
div.anchor{
  position: relative;
}

#p1{
  background-color: yellow;
}
#p2{
  background-color: #ff0000;
}
#p3{
  background-color: #ffaabb;
}

 /*.col-md-12 .content{
  margin-right: 2.5%;
  margin-left:  2.5%;
  */


p.content{
  border: 1px solid black;
  background-color: #a3d3d3;
  /*width: 90%; /*Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.*/
  height: 150px;
  margin-right: 5%; 
  margin-left:  5%;
  font-family: Helvetica;
  color: white;
  padding: 20px;
}

p.my-title{
  position: absolute;
  top:  0px;
  right: 0px;

  width: 80px;
  height: 20px;
  margin: 0px;
  border: 1px solid black; 
  text-align: center;
  margin-right: 5%;/*inherit; 22.525px; inherit*/
  margin-top: 16px;
   /*margin-right: auto;
  margin-left: auto;
  font-family: Helvetica;*/
  color: black;
}


/* Simple Responsive Framework. */
.row {
  width: 100%;
}
/********** desktop devices only **********/
@media (min-width: 992px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4 {
    float: left;
  }
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
}
/********** Tablet devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-12 {
    float: left;
  }
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33%;
  }
  .col-md-8 {
    width: 66.66%;
  }
  .col-md-12 {
    width: 100%;
    /*margin-right: -5.5%;
    margin-left:  -2.8%;*/
  }
}

/********** mobile devices only **********/
/* the floating is only defined inside the media queries. 
The elements will behave just like regular block level elements,
and they will automatically stack one on top of the other.
Anyway, it's better to explicit define the media query also for
mobile phones. */

@media (max-width: 767px) {
  .col-sd-9, .col-sd-10, .col-sd-11, .col-sd-12 {
    float: left;
  }
  .col-sd-9 {
    width: 74.99%;
  }
  .col-sd-10 {
    width: 83.33%;
  }
  .col-sd-11 {
    width: 91.66%;
  }
  .col-sd-12 {
    width: 100%;
  }
}

Thank you!

Upvotes: 0

Views: 49

Answers (1)

GvM
GvM

Reputation: 1733

check this fiddle

div.anchor{
  position: relative;
  padding: 0 15px;
}

p.content{
  border: 1px solid black;
  background-color: #a3d3d3;
  /*width: 90%; /*Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.*/
  height: 150px;
  /* margin-right: 5%; 
  margin-left:  5%; */
  font-family: Helvetica;
  color: white;
  padding: 20px;
}

p.my-title{
  position: absolute;
  top:  16px;
  right: 15px;
  width: 80px;
  height: 20px;
  margin: 0px;
  border: 1px solid black; 
  text-align: center;
/*   margin-right: 5%;inherit; 22.525px; inherit
  margin-top: 16px; */
   /*margin-right: auto;
  margin-left: auto;
  font-family: Helvetica;*/
  color: black;
}

EDITS: removed margin left and right on p.content and p.my-title, added padding on div.anchor and top and right position on p.my-title

Upvotes: 1

Related Questions