html - Make text wrap around image

I'm currently struggling to achieve the project of advanced html/css in the odin project which involved responsive design. .png Here is the layout for tablet .png Here is the layout for cumputer

I currently implemanted the site for desktop, however for the header I used display flex on the header and implemanted the picture and the text container in two diferent container. For the tablet I would like to make the picture in the same container as the text and use float left then maybe adjusting the position with position relative. Is it considered bad practice to use display none in media queries two simulate two html ? Is there a better way to implemant this design ?

Here is my header in html and css currently for the desktop version

    <header>
        <div class="picture-container">
            <figure class="fig"><img class="presentation-photo" src="./asset/images/photo_identite.jpeg" alt=""></figure>
            <figcaption class="caption">Aymeric SABRIÉ</figcaption>
        </div>
        
        <div class="text-container">
        
            <h2 class="header-title">About me</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
            <div class="icon-container">
                <a href="; aria-label="github"><img src="./asset/images/github.svg" alt="github icon" class="icon"></a>
                <a href="/" aria-label="linkedin link"><img src="./asset/images/linkedin.svg" alt="linkedin icon" class="icon"></a>
                <a href="; aria-label="X link"><img src="./asset/images/twitter.svg" alt="twitter icon" class="icon"></a>
            </div>
        </div>
    </header>

body{
    display: flex;
    align-items: center;
    flex-direction: column;
}

header{
    position: relative; 
    padding: 20px;
    max-width: 1200px;
    min-width: 1080px;
    display: flex;
    align-items: center;
}

body::before{
    width: 100%;
    display: block;
    background-color: #0891b2;
    min-height: 550px;
    position: absolute;
    content: "";
    z-index: -0.5;
    transform: skew(0,-10deg);
    top: -200px;
}

.text-container{
    max-width: 450px;
    background-color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 290px;
    gap: 5px  ;
    z-index: 0;
}

.presentation-photo{
    max-width: 300px;
}

header>*{
    box-shadow: 5px 5px 2px 1px rgba(0, 0, 0, 0.233);
}


.icon{
  width: 20px;
  height: auto;
}

.icon-container{
  display: flex;
  gap: 10px;
  align-self: flex-end;
  margin-top: auto;
}

.header-title{
  font-family:"Playfair Display" ;
}

.text-container{
  font-family: "Roboto";
}

.picture-container{
  position: relative;
}

.caption{
  position: absolute;
  bottom: 0;
  padding: 10px;
  font-size: 2.2rem;
  color: white;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;  
}

I'm currently struggling to achieve the project of advanced html/css in the odin project which involved responsive design. https://cdn.statically.io/gh/TheOdinProject/curriculum/1c8b5c739efd263e8cc48703988b18d6e3afe034/advanced_html_css/responsive-design/project_personal_portfolio/imgs/portfolio%20tablet.png Here is the layout for tablet https://cdn.statically.io/gh/TheOdinProject/curriculum/fd6d4d2e2abbac4a3bd183bba6b6eaf1548a1458/advanced_html_css/responsive_design/project_personal_portfolio/imgs/portfolio.png Here is the layout for cumputer

Here is my header in html and css currently for the desktop version

    <header>
        <div class="picture-container">
            <figure class="fig"><img class="presentation-photo" src="./asset/images/photo_identite.jpeg" alt=""></figure>
            <figcaption class="caption">Aymeric SABRIÉ</figcaption>
        </div>
        
        <div class="text-container">
        
            <h2 class="header-title">About me</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
            <div class="icon-container">
                <a href="https://github/aymerrric" aria-label="github"><img src="./asset/images/github.svg" alt="github icon" class="icon"></a>
                <a href="https://www.linkedin/feed/" aria-label="linkedin link"><img src="./asset/images/linkedin.svg" alt="linkedin icon" class="icon"></a>
                <a href="https://x/filao14" aria-label="X link"><img src="./asset/images/twitter.svg" alt="twitter icon" class="icon"></a>
            </div>
        </div>
    </header>

body{
    display: flex;
    align-items: center;
    flex-direction: column;
}

header{
    position: relative; 
    padding: 20px;
    max-width: 1200px;
    min-width: 1080px;
    display: flex;
    align-items: center;
}

body::before{
    width: 100%;
    display: block;
    background-color: #0891b2;
    min-height: 550px;
    position: absolute;
    content: "";
    z-index: -0.5;
    transform: skew(0,-10deg);
    top: -200px;
}

.text-container{
    max-width: 450px;
    background-color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 290px;
    gap: 5px  ;
    z-index: 0;
}

.presentation-photo{
    max-width: 300px;
}

header>*{
    box-shadow: 5px 5px 2px 1px rgba(0, 0, 0, 0.233);
}


.icon{
  width: 20px;
  height: auto;
}

.icon-container{
  display: flex;
  gap: 10px;
  align-self: flex-end;
  margin-top: auto;
}

.header-title{
  font-family:"Playfair Display" ;
}

.text-container{
  font-family: "Roboto";
}

.picture-container{
  position: relative;
}

.caption{
  position: absolute;
  bottom: 0;
  padding: 10px;
  font-size: 2.2rem;
  color: white;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;  
}

Share Improve this question asked Mar 30 at 13:40 Fi alo 552 bronze badges

You are including the markup for desktop but are having issues with the tablet version and the image and text? If so, what did you try so far for tablet? Don't include code which is already working, add what is not working and what you tried to offer a solution. – prettyInPink Commented Mar 30 at 14:20
``` @media (max-width: 1100px){ body{ width: 100%; } .picture-container figure{ float: left; margin: 5px; } .text-container{ min-height: 500px; max-width: none; display: inline; padding: 20px; min-height: 290px; gap: 5px ; } html{ } header{ display: block; align-items: normal; min-width: auto; } .picture-container{ position: static; display: inline; } .text-container{ border: red solid 2px; } } ``` Here is my current attempt – Fi alo Commented Mar 30 at 16:55
It allows me to have a wrapping behavior but it act so weirdly I have my text container who acts wrong like some par of it make no sense at all they hide an icon and some text – Fi alo Commented Mar 30 at 16:58

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

Is it considered bad practice to use display: none in media queries to switch between two alternative sections of HTML?

Yes. Your HTML should contain only the content, arranged in the sequence which would make sense to a reader even if the stylesheet is completely missing. Strive to preserve the purity of your HTML ... avoid polluting it with style-related hacks such arranging content in alternative ways. CSS is generally powerful enough to make a well-structured document look however you want it to look, including being responsive to different viewport widths.

For the header I used display flex and placed the picture and the text in two different containers. For the tablet I would like to make the picture in the same container as the text and use float: left then maybe adjusting the position with position: relative.

You can use float with your current HTML structure, you don’t need to change it.

body {
  margin: 1em;
}

figure {
  margin: 0;
  position: relative;
}

figcaption {
  position: absolute;
  bottom: 0.5em;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 3.5vw;
}

img {
  width: 100%;
}

.text-container {
  background-color: beige;
}

/* on narrow screens, float the picture to the left */

.picture-container {
  width: 40%;
  float: left;
  margin: 0 1em 0.5em 0;
}

/* on wider screens:
   1. make the header a flexbox
   2. remove the float */

@media (min-width: 750px) {

  header {
    display: flex;
    gap: 1em;
    align-items: center;
  }
  
  .picture-container {
    width: auto;
    float: none;
    flex: 1;
  }

  .text-container {
    flex-basis: 60%;
  }
}

<header>

  <div class="picture-container">
    <figure>
      <img src="https://picsum.photos/800">
      <figcaption>Aymeric SABRIÉ</figcaption>
    </figure>
  </div>
        
  <div class="text-container">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.
    </p>
    <p>
    Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque. Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </p>
  </div>

</header>

After running this snippet, use the full page link to test the responsive behaviour.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Make text wrap around image - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)