CODEWITHSUNDEEP
htmlcssflexbox
Mischa Silver
Mischa Silver

Reputation: 3

media query for text-align in flexbox

I have two flexboxes side by side that stack one on top of the other under a media query when the screen size is reduced. The left box has left-aligned text, the right box has right-aligned text. Is it possible to centre-align the text in both flex boxes when the media query is activated? Please post the code if this is possible. Thanks.

/* Container for flexboxes */
header {
  display: -webkit-flex;
  display: flex;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 600px) {
  header {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}


/* Style the side */
logosmall {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #FA8072;
  padding: 20px;
}

/* Style the content */
bannersmall {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #FFA07A;
  padding: 10px;
}


/* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}
<header>

<logosmall>
<h1 style="font-size:15px; font-style:italic; color:#555; text-align: left;">Text-align: left</h1>
</logosmall>

<bannersmall>
<h1 style="font-size:15px; font-style:italic; color:#555; text-align: right;">Text-align: right</h1>
</bannersmall>
</header>

Upvotes: 0

Views: 188

Answers (2)

MattHamer5
MattHamer5

Reputation: 1491

You need to remove the inline-styling for text-align on both of your elements and instead put them into your CSS file instead. Then you can simply add the text-align:center; style to your existing media query.

 @media (max-width: 600px) {
    header {
      -webkit-flex-direction: column;
      flex-direction: column;
      text-align:center;
    }
    logosmall, bannersmall {
      text-align:center;
    }
}

logosmall {
  text-align:left;
}

bannersmall {
  text-align:right;
}

Upvotes: 0

Piyush Verma
Piyush Verma

Reputation: 295

Remove the inline style on h1 here is the updated code. Hope it helps

/* Container for flexboxes */
header {
  display: -webkit-flex;
  display: flex;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */


/* Style the side */
logosmall {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #FA8072;
  padding: 20px;
}
header h1{
font-size:15px; font-style:italic; color:#555; text-align: left;
}
header bannersmall h1{
  text-align:right;
}
/* Style the content */
bannersmall {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #FFA07A;
  padding: 10px;
}


/* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}

@media (max-width: 600px) {
  header {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  header h1, header bannersmall h1{
  text-align:center;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">




<title>Test</title>

<style>

</style>
</head>



<body>

<header>

<logosmall>
<h1>Text-align: left</h1>
</logosmall>

<bannersmall>
<h1>Text-align: right</h1>
</bannersmall>
</header>

</body>

Upvotes: 1

Related Questions