CODEWITHSUNDEEP
htmlcssresponsive-designflexbox
Jamiemcg
Jamiemcg

Reputation: 69

CSS - Responsive Relative Flex Divs

I've recently been practicing some CSS and have been making some progress, but I can't seem to figure out how to make a div mobile-responsive if its position is set to relative and it is contained within another div that is set to display: flex;.

I tried modifying the left and right margins on the divs, but this didn't seem to have the desired effect of making the div resize when the viewport is resized to simulate a small or mobile device's screen.

If someone wouldn't mind taking a quick peak at my code to see where I may be missing something or where I may have went wrong, I'd greatly appreciate the assistance! (And if anyone happens to have any general advice regarding my code, that would also be appreciated - I'm not the best with CSS so any feedback would certainly be appreciated!)

Please see below for my HTML and CSS code.

Thanks,

Jamie

body{
  background-color: #bed3f4;
  margin: 0px;
  padding: 0px;
}

.navbar{
  height: 50px;
  width: 100%;
  background-color: white;
}

.logo{
  font-size: 18px;
  font-family: cursive;
  padding-top: 8px;
  padding-left: 5px;
}

.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile_image{
  height: 200px;
  width: 200px;
  background-color: #c2c4c6;
  border-radius: 5px;
  position: absolute;
  top: 10%;
}

.profile_box{
  position: relative;
  top: 20%;
  height: 600px;
  width: 500px;
  background-color: #fff;
  border-radius: 5px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 200px;
  margin-left: 20px;
  margin-right: 20px;
}

.name{
  height: 30px;
  width: 200px;
  text-align: center;
  margin-top: 60px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  font-weight: bold;
  font-family: Arial;
}

.user_bio{
  position: relative;
  width: 480px;
  height: 450px;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
  padding: 10px;
  font-style: Arial;
}

.user_social_icons{
  position: relative;
  width: 100%;
  height: 30px;
  margin-top: 100px;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
  word-spacing: 10px;
}
<html>
  <head>
    <title>Personal Profile Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
  </head>
  <body>

    <div class="navbar">
      <div class="logo">Profile Page</div>
    </div>

    <div class="container">

      <div class="profile_box">

        <div class="name">Jamie McGibbon</div>

        <div class="user_bio">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper nulla id leo eleifend, in mattis diam pretium. Proin pellentesque ultrices consectetur. Etiam eget magna leo. Aliquam condimentum nisi leo, vel cursus lorem placerat vitae.</p>

          <p>Quisque pulvinar id sapien eu dapibus. Vestibulum risus dui, aliquam sit amet congue non, egestas a leo. Nam sed eleifend diam. Nullam ultrices vel dolor et mattis. Praesent eu euismod nisl. Ut quis dolor risus. Proin sem diam, hendrerit in dui sit amet, faucibus vulputate ex. Curabitur molestie rhoncus ligula varius scelerisque.</p>

          <div class="user_social_icons">
            <i class="fab fa-facebook-square fa-3x"></i>
            <i class="fab fa-twitter-square fa-3x"></i>
            <i class="fab fa-reddit-square fa-3x"></i>
            <i class="fab fa-github-square fa-3x"></i>
            <i class="fab fa-youtube-square fa-3x"></i>
          </div>

        </div>

      </div>

      <div class="profile_image"></div>

    </div>

  </body>
</html>

Upvotes: 0

Views: 88

Answers (1)

sol
sol

Reputation: 22959

Some suggestions..

You can remove positioning rules here. text-align seems to do what you need. Remove fixed width and height from the main content, that's what's causing overflow of child elements.

Happy to answer further questions.

body {
  background-color: #bed3f4;
  margin: 0;
}

.navbar {
  height: 50px;
  width: 100%;
  background-color: white;
}

.logo {
  font-size: 18px;
  font-family: cursive;
  padding-top: 8px;
  padding-left: 5px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 100px;
}

.profile_image {
  height: 200px;
  width: 200px;
  background-color: #c2c4c6;
  border-radius: 5px;
  position: relative;
  z-index: 1;
  margin-top: 20px;
  margin-bottom: -20px;
}

.profile_box {
  width: 70%;
  background-color: #fff;
  border-radius: 5px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 50px;
}

.name {
  text-align: center;
  margin-top: 60px;
  font-size: 20px;
  font-weight: bold;
}

.user_bio {
  border-radius: 5px;
  padding: 10px;
  font-style: Arial;
  text-align: center;
}

.user_social_icons {
  margin-top: 100px;
  text-align: center;
  border-radius: 5px;
  word-spacing: 10px;
}
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
<div class="navbar">
  <div class="logo">Profile Page</div>
</div>

<div class="container">
  <div class="profile_image"></div>
  <div class="profile_box">

    <div class="name">Jamie McGibbon</div>

    <div class="user_bio">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper nulla id leo eleifend, in mattis diam pretium. Proin pellentesque ultrices consectetur. Etiam eget magna leo. Aliquam condimentum nisi leo, vel cursus lorem placerat vitae.</p>

      <p>Quisque pulvinar id sapien eu dapibus. Vestibulum risus dui, aliquam sit amet congue non, egestas a leo. Nam sed eleifend diam. Nullam ultrices vel dolor et mattis. Praesent eu euismod nisl. Ut quis dolor risus. Proin sem diam, hendrerit in dui
        sit amet, faucibus vulputate ex. Curabitur molestie rhoncus ligula varius scelerisque.</p>

      <div class="user_social_icons">
        <i class="fab fa-facebook-square fa-3x"></i>
        <i class="fab fa-twitter-square fa-3x"></i>
        <i class="fab fa-reddit-square fa-3x"></i>
        <i class="fab fa-github-square fa-3x"></i>
        <i class="fab fa-youtube-square fa-3x"></i>
      </div>

    </div>

  </div>



</div>

Upvotes: 1

Related Questions