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;
}
}

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 jQuery to Drag: Creating a draggable effect on a div element

I recently posted a question, but I feel like I need to rephrase it to make it more general. Basically, I have an element that can be moved around and resized using jQuery. I used CSS to attach another div to the right of this element. Initially, when you ...

jqueryhtmlcssdrag

React Native can trigger a press event, as long as it is not within

My situation involves triggering an action when clicking on the parent component (TouchableOpacity, for example), but not triggering anything when clicking on the children components (Screen and others). It's similar to preventing bubbling on the web. ...

javascriptreactjsreact-native

retrieving embedded content from an iframe on Internet Explorer version 7

Need help with iframe content retrieval $('.theiframe').load(function(){ var content = $(this.contentDocument).find('pre').html(); } I'm facing an issue where the iframe content is retrieved properly in FF, Chrome, and IE 8,9 ...

javascriptjqueryhtmlinternet-exploreriframe

The sequence of HTML attributes

Could there be a subjective angle to this question (or maybe not)... I work on crafting web designs and applications using Visual Studio and typically Bootstrap. When I drag and drop a CSS file into an HTML document, the code generated by Visual Studio loo ...

javascripthtmlcssattributescoding-style

Tips on how to direct the attention to a text box within a unique dialog, ensuring that the blinking cursor highlights the input area

Is there a way to set autofocus on a textbox when opening a custom dialog box? I've tried using the autofocus attribute for the input field, but it doesn't seem to work for me. Can anyone provide guidance on how to achieve autofocus for a textfie ...

javascriptjquery

Removing values in javascript for checkboxes that are not selected

Here is the JavaScript Code : var clinicalStat; var id; var val; var clinicalVals; $(":checkbox").click(function() { //alert(" you checked"); if ($(this).is(':checked')) { var checked1 = $(this).val(); //Inital value of check ...

javascriptjquerycheckbox

Tips for extracting only a portion of the JavaScript timestamp

I have a JavaScript timestamp that reads Tue Sep 30 2014 12:02:50 GMT-0400 (EDT). When I use the .getTime() method, I get 1412092970.768 Typically, this timestamp represents a specific time of today. My question is whether it's possible to extract o ...

javascriptdatedatetimeunix-timestamp

Using jQuery to import an external script into a React JS project

I'm looking to integrate an external JavaScript file (using jQuery) into a ReactJS project. While I found some guidance on this page, I am still encountering errors. The external JS file is named external.js: $(document).ready(function() { docu ...

javascriptjqueryreactjscordova

A platform for creating ER and flow diagrams specifically tailored for web applications, utilizing open source software

Our team is currently working on creating a web application that enables users to create diagrams, such as flow or ER diagrams. We are looking for ways to convert these diagrams into XML or other formats for representation. Are there any open-source soft ...

javajavascriptjqueryajaxgwt

Customizing content based on Route - Utilizing Node.js/React

I am currently working on setting up routes for different pages of store profiles in my Node app. I have been doing some research online and have come to understand how to adjust the parameters, but I am struggling with figuring out how to dynamically chan ...

javascripthtmlnode.jsreactjsexpress

Utilizing the retina pixel ratio media query in Internet Explorer 8

I'm currently working on a project to develop a responsive website using SASS/Compass, and I am incorporating retina icons by utilizing generated sprites. In my .scss file, I have created a mixin for including these icons. Here is my mixin for retina ...

cssinternet-explorer-8sassmedia-queriesretina

What is the method to combine multiple style values in vue.js?

Is there a way to create a div with a box shadow where the values can be changed using a slider? I am having trouble using more than one value stored in a data variable. Any suggestions on how to achieve this? <div :style="{ borderRadius: x_axis y_ ...

javascriptcssvue.js

The Issue of Double-Clicking on Table Cells in Internet Explorer 8

I implemented a JQuery function to add a double click event listener to a table, which triggers a modal popup when a cell is double-clicked. While this functionality works seamlessly in Firefox, there is an issue in IE8 where double-clicking a cell highli ...

javascriptjqueryinternet-explorer-8

What is the best method to detect a change in scroll position on a webpage using JavaScript?

Is there a way to trigger an event when the page's scroll position changes? I'm interested in creating a dynamic table of contents similar to (where the active item changes as you scroll). Can this be achieved without directly accessing the cu ...

javascriptcss

Error: Docker/Next.js cannot locate module '@mui/x-date-pickers/AdapterDateFns' or its respective type definitions

When I run the command npm run build, my Next.js application builds successfully without any issues. However, when I try to build it in my Dockerfile, I encounter the following problem: #0 12.18 Type error: Cannot find module '@mui/x-date-pickers/Ada ...

javascriptdockerdocker-composematerial-ui

What are the best ways to create image animations on top of other images using CSS or JavaScript?

Imagine if the first image is in black and white, while the second one is colored. How can we make the black and white image change to color after a timeout period, with an animation similar to loading progress bars? Is this achievable using CSS or JavaScr ...

javascripthtmlcss

The Redux Toolkit Slice Reducer fails to function properly when incorporating an extra Reducer that is not compatible

I am relatively new to the world of Redux and have been attempting to use RTK right from the start. It has been quite a challenging and confusing experience for me so far. Recently, I decided to include a standard Reducer instead of an extraReducer in my ...

javascriptreactjsreduxredux-thunkredux-toolkit

Setting a maximum character limit for an HTML textarea

I am currently attempting to limit the maximum number of characters allowed in a textarea. Using: <textarea rows="4" cols="50" maxlength="50"> It is functioning correctly in Firefox, but there is no impact in IE. This is an issue as many website u ...

htmltextareamaxlength

How can I update the title of the NavigationBarRouteMapper without altering the current route in React Native?

Here is a snippet of code that outlines the NavigationBarRouteMapper: var NavigationBarRouteMapper = { ... , RightButton(route, navigator, index, navState){ return( <TouchableHighlight onPress={()=>{ //When this ...

javascriptreact-native

Restricting the number of times a user can click on

I am currently displaying a table with data obtained from a database query. The structure of the table is outlined below: <table id="dt-inventory-list" class="table table-responsive"> <thead> <tr> <th>Field ...

javascriptjqueryhtmldatatable