Is it possible to modify the shrinking behavior of Flexbox?

My goal is to mimic the layout of a specific webpage using flexbox in my version. However, I've noticed that my version, utilizing flexbox, adjusts to smaller screen sizes differently than the original. The original layout I'm trying to replicate maintains its margin as the screen size decreases, before resizing the text and images. The adjustments made by the original layout are more visually appealing. Once the screen size reaches 960px, I plan to switch flexbox to block using media queries. But I would like the text and images in my version to adjust similarly to the original between 1440px and 960px. I've created a video to demonstrate what I mean: https://youtu.be/1pKq_UW-3Hk

Below is the code snippet for my version:

.section3-h1 {
    font-size: 3.125rem;
    font-family: "Roboto";
}

button {
    width: 176px;
    height: 47px;
    background: #6442ff;
    color: #ffffff;
    font-family: "Roboto";    
    font-size: 12px;
    line-height: 18px;
    align-items: center;
    border: none;
}

.section2-head {
    margin: 150px;
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    flex-flow: row wrap-reverse;
}

.section2-text {
    max-width: 537px;
    margin-right: 74px;
}

.button {
    margin-top: 60px;
}

.section3-head {
    margin: 150px;
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    flex-flow: row wrap;

}

.section3-text {
    max-width: 537px;
    margin-left: 74px;
    font-family: "Roboto";
<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> 
    <title>Document</title>
</head>
<body>
    <section id="section2">
        <header class="section2-head">
            <div class="section2-text">
                <h1 class="section2-h1"> Lorem ipsum dolor sit ame. 
                </h1>
                <p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
                <button class="button">READ MORE</button>
            </div>
            <img src="https://via.placeholder.com/528x396" alt="" class="section2-img">
        </header>
    </section>

     <section id="section3">
        <header class="section3-head">
            <img src="https://via.placeholder.com/528x396" alt="" class="section3-img">
            <div class="section3-text">
                <h1 class="section3-h1"> Lorem ipsum dolor sit ame. 
                </h1>
                <p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
                <button class="button">READ MORE</button>
            </div>
        </header>
    </section>
    
</body>
</html>

htmlcssflexbox

Answer №1

I have completely revamped your code, eliminating all unnecessary max-widths and CSS. Additionally, I have included the media query for desktop styling.

button {
  width: 176px;
  height: 47px;
  background: #6442ff;
  color: #ffffff;
  font-family: "Roboto";
  font-size: 12px;
  line-height: 18px;
  align-items: center;
  border: none;
}

section {
  margin: 0 20px;
  max-width: 1170px;
  padding: 50px 0;
}

section header {
  display: flex;
  flex-direction: column;
}

section header .text {
  margin: 30px 0 0 0;
}

section header img {
  display: block;
  width: 100%;
  height: auto;
}

section.reverse header .text {
  order: 2;
}

section.reverse header img {
  order: 1;
}

@media (min-width: 992px) {
  section {
    margin: 40px auto;
  }
  section header {
    flex-direction: row;
    flex-wrap: nowrap;
  }
  section header .text {
    flex: 0 0 calc(50% - 30px);
    margin: 0 0 0 30px;
  }
  section header img {
    flex: 0 0 calc(50% - 30px);
    margin: 0 30px 0 0;
  }
  section.reverse header .text {
    margin: 0 30px 0 0;
    order: 1;
  }
  section.reverse header img {
    order: 2;
    margin: 0 0 0 30px;
  }
}
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<div class="container">
  <section id="section2" class="reverse">
    <header class="section2-head">
      <div class="section2-text text">
        <h1 class="section2-h1"> Lorem ipsum dolor sit ame.
        </h1>
        <p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia
          nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
        <button class="button">READ MORE</button>
      </div>
      <img src="https://via.placeholder.com/528x396" alt="" class="section2-img">
    </header>
  </section>
</div>

<div class="container">
  <section id="section3">
    <header class="section3-head">
      <img src="https://via.placeholder.com/528x396" alt="" class="section3-img">
      <div class="section3-text text">
        <h1 class="section3-h1"> Lorem ipsum dolor sit ame.
        </h1>
        <p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia
          nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
        <button class="button">READ MORE</button>
      </div>
    </header>
  </section>
</div>

Answer №2

It appears that a significant amount of redundant code has been identified. I have taken the liberty to refactor the code for efficiency.

Please see the revised code below. I have optimized the classes and structure to minimize stylesheet complexity.

* {
  font-family: "Roboto";
}

.button {
  width: 176px;
  height: 47px;
  background: #6442ff;
  color: #ffffff;
  font-family: "Roboto";
  font-size: 12px;
  line-height: 18px;
  align-items: center;
  border: none;
  margin-top: 60px;
}

.container {
  width: 90%;
  margin: 0 auto;
}
.flexbox {
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
}
.flexbox * {
  width: 100%;
}
.marr74 {
  margin-right: 74px;
}
.marl74 {
    margin-left: 74px;
}
.flex-image img {
  width: 100%;
}
.heading {
    font-size: 3.125rem;
}
@media only screen and (max-width: 764px){
    .flexbox {
        flex-direction: column;
    }
}

Below is the HTML structure:

<section>
        <div class="container">
          <div class="flexbox">
            <div class="flex-content marr74">
              <p class="heading">Lorem ipsum dolor sit ame. </p>
              <p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
              <a href="#" class="button">READ MORE</a>
            </div>
            <div class="flex-image"><img src="https://via.placeholder.com/528x396" alt="" class="section2-img"></div>
          </div>
          <div class="flexbox">
            <div class="flex-image"><img src="https://via.placeholder.com/528x396" alt="" class="section2-img"></div>
            <div class="flex-content marl74">
              <p class="heading">Lorem ipsum dolor sit ame. </p>
              <p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
              <a href="#" class="button">READ MORE</a>
            </div>

          </div>
        </div>
      </section>

It's worth noting that using more than one h1 tag on a single page can impact the SEO of your website. Consider using p or a similar element with specified font size for larger text instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to setting a dynamic value for an input List property in Angular

How can I render multiple dropdowns in Angular based on the response from an API? Currently, when I retrieve data from the API, I am seeing the same information displayed in both dropdown controls. Is there a way to assign dynamic values to the "list" prop ...

html.netangularjstypescript

Adjusting the size of content with CSS

I've been attempting to get an image to cover the entire screen on a device using CSS, but so far I haven't had any success. The image is within an :after pseudo element and content tag. Since it needs to be laid over the HTML, I can't use t ...

htmlcss

Changing the value of a form input name after a $scope.$watch event is activated

In my AngularJS 1.4 project, I have a form input element where I am attempting to dynamically set the name attribute. <input type="email" name="{{ctrl.name}}" class="form-control" id="email" ng-minlength="5" required> The assignment of the name att ...

javascripthtmlangularjsformsangularjs-scope

Setting an action when clicking on a slice of a Doughnut chart using Chart.js

I have been working on integrating chart.js into my Django Project, and so far it has been going smoothly. I successfully created a doughnut chart with two slices. Now, I am trying to implement separate actions for each slice when clicked, such as redirect ...

javascriptpythonhtmldjangochart.js

Is there a way to add Internet Explorer specific stylesheets to the Wordpress functions directory using enqueue?

I'm facing challenges setting up my Wordpress theme to be compatible with early versions of Internet Explorer. Most online tutorials have advised me to enqueue specific I.E stylesheets in the header, but this method has not been successful for me. Add ...

phpcsswordpress

Create a responsive DIV element within a website that is not originally designed to be responsive

I am looking to optimize the positioning of an ad div on my non-responsive website. The current setup has the ad displayed at 120x600 pixels, always floating to the right of the screen. While this works well for desktop or large devices, the display become ...

htmlcss

What is the best way to re-render a component immediately following an update in React?

As I attempt to change the color of a bar to green and then back to black, it seems like the latter color update is taking precedence in my code. const [color, setColor] = useState("black") const bubbleSort = async () => { const sleep = ms => ...

cssreactjsdomdom-events

When using a custom selection color to highlight underlined text, the underline becomes invisible

I am currently working on a website where I want to customize the text selection color. ::selection { background-color:#00ffff; } However, there seems to be an issue in this specific situation: p::after { content:"Try selecting the above elemen ...

htmlcssselection

Place your cursor over the following element to take control

There is a paragraph that needs to be clipped when hovered over. An issue arises where the H1 text shifts its position. Only the phrase "HOVER ABOVE PARAGRAPH" should be concealed. * { margin: 0; box-sizing: border-box; } .wrapper { displ ...

htmlcsshover

The attribute 'checked' is not a valid property for the 'TElement' type

Learning about typescript is new to me. I have a functional prototype in fiddle, where there are no errors if I use this code. http://jsfiddle.net/61ufvtpj/2/ But in typescript, when I utilize this line - if(this.checked){ it presents an error [ts] Pro ...

javascriptjquerycssangulartypescript

Tips for saving the circular slider value to a variable and showcasing it in the console

I have coded a round slider and need assistance with storing the slider value in a variable and displaying it in the console using JavaScript. I want to store the tooltip value in a variable for future use. $("#slider").roundSlider({ radius: 180, min ...

javascripthtmlcssconsoleround-slider

Divs displayed using inline-block do not align seamlessly

I am having an issue with the alignment of 4 divs displayed inside a main container. Despite all having a fixed height of 100px, some of them have text that is one line longer than the others. In theory, this should not affect their positioning on the same ...

htmlpositioncss

How can you make a dropdown button interactive and display a list simultaneously?

I'm facing an issue with lines 45-47 in the second link. If that code is present, the button animates when clicked (which is great) BUT the dropdown items ("About," "Archive," "Contact") do not appear. If I remove lines 45-47, the dropdown items appea ...

jqueryhtml

Unable to make a request to the localhost node server via fetch API from an HTML page

Description: I am attempting to transmit JSON data from an HTML page to a Node.js server running locally on port 5000 using the Fetch API. Error Encountered: The request to 'http://localhost:5000/attend' from origin 'http://127.0.0.1:5501 ...

javascripthtmlnode.jsexpressfetch-api

Adjust the badge color on the zabuto calendar

I am working on a website with a zabuto calendar that loads events through an ajax call. Each event on the calendar is currently represented by a yellow badge. I am wondering if there is a way to customize or change the color of these badges? Below is the ...

jquerycsscalendar

Tips for avoiding word wrapping in text with white spaces

I am currently experiencing an issue with word-wrapping in my category names when there are two words separated by a space. Below is the CSS code snippet: .post-item .cat { height: 25px; display: inline-block; background: #CC0000; font-size: 11px; paddin ...

css

Retrieve the individual character styles within an element using JavaScript

I'm currently dealing with a dynamically created div that features styled characters like: <div>Hello <b>J</b>oe</div> and my goal is to identify which characters are styled (in this case, the letter J). I've already atte ...

javascripthtmlcss

Maintain the aspect ratio of an image when placing it in a square container

Looking for a way to create a CSS grid with non-square random sized images? I need help filling all the space inside a fixed size div. Any suggestions? Check out my example: (blue represents the fixed size div and red shows the image inside it) ...

javascriptjqueryhtmlcss

Looping through multi-dimensional JSON objects with jQuery

Hello there, I'm currently facing some challenges in getting the screen below to work properly: Project progress screen I have generated the following JSON data from PHP and MYSQL. My goal is to display the project alongside user images and names whe ...

javascriptjqueryhtmlarraysjson

Styling Drawn Elements on a Canvas Using CSS

Can CSS Animations be applied to a circle drawn on a canvas using JavaScript? Specifically, I am using an AngularJS directive for this purpose: https://github.com/angular-directives/angular-round-progress-directive/blob/master/angular-round-progress-direct ...

cssangularjscanvasangularjs-directivecss-animations