Place the image either above or below the text in a relative position

I have a peculiar dilemma that has been on my mind lately. As I work on designing my website, I am nearing completion of the responsive/mobile view. Currently, everything looks fine, but only because I use display: none; to hide images when the viewport is too small for them to display properly (you can check it out at 

drleilamasson.com/css/responsive.css
).

The specific images causing me trouble are the book in the book section and the parrot in the social section. If I don't hide these images, they will overlap with the text and block the content. Ideally, I want the book image to appear above the text perfectly centered. Despite playing around with the styles of these images, I still haven't found a solution.

I'm hoping someone here can help me crack this puzzle! Thank you in advance :)

javascripthtmlcsstwitter-bootstrap

Answer №1

You have already designated a flexbox parent for the <section id="about">, allowing us to manipulate the direction and order of its children.

@media (max-width: 1065px) {
  #about {
    flex-direction: column; /* rearrange children vertically */
  }

  .leila-book-img {
    ...
display: none; <-- delete
margin: 0 auto;
order: 2; /* move the image container after the text */
}

.about-content {
padding-bottom: 1em;
}
}

https://i.sstatic.net/RxB7H.png

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

Using PHP to insert data from a form with multiple checkbox selections into a MySQL database

Having a form with various fields like Textinputs, Checkboxes, Radios...and seeking to submit it to a MySQL database. Oddly enough, when I remove the checkboxes HTML and associated PHP code, everything functions properly, and all information is successfull ...

phphtmlmysqlformscheckbox

Challenges in using Three.js on mobile devices with orientation capabilities

I'm currently running tests on a web application built using three.js, and it seems that users on tablets, especially Android devices, are experiencing some unusual behavior within the scene. https://i.sstatic.net/FkFi3.jpg Below is how the view sho ...

javascriptandroidthree.js

Deactivate the Mention and Hash tag in ngx-linkifyjs

I am currently utilizing ngx-linkifyjs to automatically convert URLs in text to clickable hyperlinks. However, I am facing an issue where it is also converting # and @ tags into links. Is there a way to prevent the conversion of # and @ while maintain ...

javascriptangulartypescript

Is there a way to retrieve a label's text using their class name within a loop?

I have multiple labels sharing the same classname, each with different text. My goal is to iterate through them and extract the text they contain. Here is the example markup: <label class="mylabel pull-left"> Hello </label> <label class="m ...

javascriptjquery

Converting HTML widget code to NEXTjs code for integration in an application (CoinMarketCap Price Marquee Ticker)

Having trouble integrating the CoinMarketCap Price Marquee Ticker Widget into my NEXTjs app. I'm outlining my process and hoping for some suggestions from others who may have attempted this. Template Code: To embed the widget in an HTML page, here is ...

javascriptreactjsnext.jswidgetcoinmarketcap

Node-archiver: A tool for dynamically compressing PDF files

I am currently working on a project that involves generating multiple PDF files using pdfkit. I have an array of users, and for each user, I create a report using the createTable() function. The function returns a Buffer, which is then passed to archiver t ...

javascriptnode.jsnode-archiver

CSS: Maintain rounded corners on body border even when scrolling

I am attempting to create a body border on my webpage with rounded corners at the top to simulate the MacOS interface in the browser, similar to the image shown here: https://i.sstatic.net/ECSU9.jpg The issue arises when I scroll, and the top corners van ...

cssreactjs

What is the best way to apply CSS to my HTML code?

I have the files stored within my Django project. My directory structure for templates looks like this: |base.html | |rules | |style_base.css In my base.html file, I link to the stylesheet like this: <link type="text/css" href="/rules/style_b ...

htmlcssdjango

Encountering issues with website optimization on Google Page Speed Insights and facing compatibility problems on a specific website I designed

I attempted to analyze the performance of my website using Google Page Speed Insights and encountered an error message. I have tried looking for a solution without success. Interestingly, when I tested other websites that I manage, everything worked just ...

htmlcssbootstrap-4google-pagespeed

PHP mail function does not properly align HTML table outputs

After fetching data from the database and inserting it into an HTML table, everything appears fine. However, upon pressing the send button to email the content, sometimes the alignment of the HTML table is disrupted in the email. It seems like specific col ...

phphtmlcssphpmailer

Navigate to the same destination with React Router Dom while passing state as a parameter

Let's talk about a scenario with a Link setup like this: <Link to={`/samelocation/${id}`} state={{ state1: 'hello' }}> This link is nested in a sub-component within the main component situated at /samelocation/:id. To ensure that the ...

javascriptreactjsreact-router-dom

The kendo-ui numeric textbox is malfunctioning when set with a step value of 0.001

Having some issues with the Kendo UI numeric text box. Specifically, it doesn't seem to work properly when using a step value of 0.001. In the example code snippet below, I managed to get it to increment by 0.001 with HTML5 but couldn't make it w ...

javascriptkendo-ui

Creating a disabled HTML button that reacts to the :active CSS pseudo class

CSS: button:active { /* active css */ } button:disabled { opacity: 0.5; } HTML: <button disabled="disabled">Ok</button> After clicking the button, the browser applies the button:active state to give the appearance of a click, despite the ...

htmlcsscss-selectorspseudo-class

What methods can I incorporate sophisticated logic into my dataform process?

Summary I am looking to enhance the functionality of my Dataform pipeline by introducing a layer of modularity (via JavaScript functions) that can identify when there is a disruptive change in the schema of my raw data source. This system would then autom ...

javascriptsqlgoogle-bigqueryetldataform

Creating a list element after clicking in ReactJS is achieved by using event handlers in

I have buttons and inputs that I want to use to generate a list item in the ul section at the end of my code. However, despite adding functions to handle this feature, it still doesn't work as intended. import { useState } from 'react'; impo ...

htmlcssreactjs

Converting UK DateTime to GMT time using Angular

I am currently working on an angular project that involves displaying the start and end times of office hours in a table. For instance, the office operates from 8:30 AM to 5:30 PM. This particular office has branches located in the UK and India. Since u ...

javascriptangulartypescriptdatetimedate-pipe

How come defining the state using setTimeout does not display the accurate properties of a child component?

Presented here is a component designed to render a list of items and include an input for filtering. If no items are present or if the items are still loading, a message should be displayed. import { useState } from "react"; export const List = ...

javascripthtmlreactjs

Changing the color of a Highcharts series bar according to its value

Playing around with Highcharts in this plunker has led me to wonder if it's possible to dynamically set the color of a bar based on its value. In my current setup, I have 5 bars that change values between 0 and 100 at intervals. I'd like the colo ...

javascriptcssangularjshighcharts

What is the best approach for accessing values from dynamic or multiple form fields upon submission in React?

In my form, users have the ability to add Textfields in order to include additional items. However, I am facing a challenge when it comes to retrieving these items from the form upon submission. The Textfields are dynamically created by a component functi ...

javascriptreactjsformsmaterial-uijsx

Anomalies observed in label transition while in active state for input field

Can you explain why there is a gap in the label when it's positioned at left:0? I'm aiming to achieve a UI similar to Material design but struggling with label positioning. I've experimented with using translateY(-6px), however, this method ...

htmlcsstransition