How to position text and images in a responsive way, with HTML and CSS

Question

Im trying to position this image and tittle with text on my website. How can I make it responsive so that the scale doesnt change on different devices and everything stays at the same position. Im new at this, so im probably making a lot of mistakes.

div.content {
  width: 100vw;
  display: flex;
}

div.column1 {
  width: 15%;
  background-color: #F7F7F7;
  overflow: hidden;
  height: 100vh;
}

div.column2 {
  width: 70%;
  overflow: hidden;
}

.lobby {
  width: 45%;
  height: 45%;
  padding-top: 5.6rem;
  padding-left: 1rem;
}

.title {
  padding-top: 4.7rem;
  display: inline-block;
  float: right;
  width: 50%;
  font-size: 1.8rem;
}

.descr {
  display: inline-block;
  width: 30vw;
  float: right;
  font-size: 1rem;
  padding-top: 0.4rem;
}

<div class="content">

  <div class="column1">

  </div>

  <div class="column2">


    <div class="title">Installations
      <p class="descr"> We are a gym based in Carballo, A Coruña, counting with an installation </p>
    </div>
    <img class="lobby" src="img/lobby.jpg" alt="photo of the lobby of the gym" />
  </div>

</div>


<div class="column1">

</div>

As you can see im trying to position the image and the text on the middle row of my website, since it is divided into 3 columns.

Anything I can do to improve the code and to make it more responsive. Thanks!

I'll suggest to read about media queries. P.s don't use float to position text to the right side use text-align:right instead — law_81
– law_81, Commented Jan 13, 2023 at 7:44

vvave vvave · Accepted Answer · 2023-01-13 12:45:18Z

You don't need 3 columns. My approach starts defining the wrapper layout (the container), then working on the content layout (2 columns nested on the wrapper).

Here is my way of doing it:

HTML

<div class="main-container container">
    <div class="inner-container content">
        <div class="column-left column column-1">
            <img class="lobby" src="https://upload.wikimedia.org/wikipedia/en/c/cb/Placeholder_logo.png" alt="photo of the lobby of the gym">
        </div>
        <div class="column-right column column-2">
            <h1 class="title">Installations</h1>
            <p class="descr">We are a gym based in Carballo, A Coruña, counting with an installation </p>
        </div>
    </div>
</div>

CSS

<style>
html,
    body {
        padding: 0px;
        margin: 0px;
    }

    /* set the layout */
    .main-container {
        width: 100%;
        max-width: 100vw;
        min-height: 100vh;
        box-sizing: border-box;
        padding-left: 15%;
        padding-right: 15%;
        position: relative;
    }

    /* this is a pseudo element, it renders the grey background on the left */
    .main-container:before {
        content: "";
        display: block;
        height: 100%;
        background-color: #F7F7F7;
        /* same width of padding-left as it covers only the left side */
        width: 15%;
        position: absolute;
        z-index: 1000;
        top: 0;
        left: 0;
    }

    .inner-container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 2rem 1rem 0;
        box-sizing: border-box;
    }

    .column {
        padding: 3.6rem 0 1rem;
        box-sizing: border-box;
        /* Column width - Change this with media Queryes */
        width: 50%;
        flex-basis: 50%;
    }

    /* page elements*/
    .title {
        font-size: 1.8rem;
        margin-top: 0px;
    }

    .descr {
        font-size: 1rem;
        padding-left: 3rem;
    }

    .lobby {
        width: 45%;
        height: auto;
    }

    /* responsive media query */
    /* decide the breakpoint to start having 1 column */
    @media screen and (max-width: 767px) {
        .column {
            width: 100% !important;
            flex-basis: 100%;
        }
    }
</style>

Here is a working Codepen: https://codepen.io/Davevvave/pen/BaPZRbb

Consider the @Sfili_81 advice, first study and learn about @media_queries (https://www.w3schools.com/css/css3_mediaqueries_ex.asp), avoid float, and (I suggest) try to understand the natural behavior of HTML rendering flux, the semantic meaning of HTML tags and empower all with CSS.

Collectives™ on Stack Overflow

How to position text and images in a responsive way, with HTML and CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related