My goal is to have the image appear on top of the text when resizing the window, but maintain the appearance shown in the attached image when using a larger resolution. Below is the CSS code I am currently using:
.section4 {
text-align: center;
margin-top: 100px;
margin-bottom: 100px;
}
.section4 #title {
padding-bottom: 25px;
padding-top: 25px;
font-weight: bolder;
}
.section4 #text {
margin: auto;
width: 700px;
}
To understand what may be going wrong without looking at your HTML code is quite challenging, but here's an example you can refer to and adjust the class names accordingly:
HTML
<div>
<div class="card row img-left">
<div class="column-1-2">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png"
alt=""
/>
</div>
<div class="column-1-2">
<p>
Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla
sit amet nisl tempus convallis quis ac lectus. Nulla porttitor
accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
Proin eget tortor risus.
</p>
</div>
</div>
<div class="card row img-right">
<div class="column-1-2">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png"
alt=""
/>
</div>
<div class="column-1-2">
<p>
Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla
sit amet nisl tempus convallis quis ac lectus. Nulla porttitor
accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
Proin eget tortor risus.
</p>
</div>
</div>
</div>
CSS
body {
background: #cccccc;
}
.row {
display: flex;
width: 100%;
align-items: row;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.column-1-2 {
width: 48%;
padding: 1%;
}
.card {
background: white;
box-sizing: border-box;
justify-content: space-between;
}
.card.img-right {
flex-direction: row-reverse;
}
.card p {
padding-left: 20px;
padding-right: 20px;
text-align: center;
}
.card img {
max-width: 100%;
}
@media (max-width: 480px) {
.row {
align-items: column;
}
.column-1-2 {
width: 98%;
padding: 1%;
}
}
Check out this sandbox for further reference
Please note that using an HTML framework could simplify this process significantly. UKGrid provides a precise example of this.
I am looking to create a multi-column form layout that allows each row to have a different number of fields. My initial approach was using tables and the colspan attribute within td tags for layout structure. However, I have learned that using tables for l ...
My goal is to pass an ID as an argument to a function in the following manner: HTML <button type="button" class="like btn" onclick="like('<%=postid%>')"> <svg id ='<%=likei ...
I want to have a video play as a pop-up when the user clicks a play button, while also fading out the background of the page. It should be similar to the way it works on this website when you click to watch a video. How can I achieve this? <div class=" ...
I've been working on making the ball element move and shrink towards the goals upon mouse click. I successfully created a function that captures the mouse click coordinates in the goals, but I'm facing challenges with the ball animation. I consi ...
I attempted to create a parallax effect using Angular and the OnScroll event, however, while scrolling, the text seems to be flickering. Is there a way to make the smooth rendering onscroll? Maybe through CSS alone? Here is the script I used: https://sta ...
<title>Orders Export</title> <body> <?php header('Content-Type: application/xls'); header('Content-Disposition: attachment; filename=download.xls'); $con = mysqli_connect('localhost','suresafe ...
Having a bit of trouble with my navbar setup. I want to use an image brand with img-fluid so it resizes to fit the div and remains responsive. However, instead of resizing, the image just stretches out the navbar making it huge. Here's my code: ...
As an affiliate for flipkart, I promote their products on my website. I am interested in being able to track the orders and purchases made by users who are redirected to flipkart from my site. Is it possible for us to obtain the order/purchase id for thos ...
Is there a way to keep the pop submenu visible even when the mouse hovers outside of its parent container or the submenu? Currently, if the mouse doesn't move straight down from the parent container (B) .account-settings-container to the top arrow of ...
After receiving a JSON object from an elastic search query, I successfully extracted the data using the code snippet below: $scope.results = response.hits.hits; console.log($scope.results); var resultstofilter = []; var resultArray = []; ...
Is there a way to add text-shadows to elements in IE without having a black outline around the text when it is not black? I know IE doesn't support text-shadow property but using filter: property gets pretty close. If anyone has any suggestions or so ...
I have attempted to move the last element in my list to the first position upon clicking, but unfortunately, it is not working as expected. I followed the advice provided in response to a question on the following page: Move last child to first position. W ...
Vue is being used to create a dynamic picture component, resulting in the following code: <picture style="display: contents;"> <source type="image/avif" sizes="700px" src ...
My goal is to have two columns that stack divs of varying heights in the order they appear. These divs are created dynamically, causing some challenges with alignment when floated at 50% width. For example, div #4 may end up being significantly taller tha ...
When using Bootstrap 3.2 and applying navbar-right to two different dropdown menus, they tend to overlap slightly. The code snippet below is taken directly from the Dropdown examples on the official Bootstrap website, but with the modification of having tw ...
I am facing an issue where I have a button with an anchor element that I need to trigger with the spacebar key for accessibility purposes. However, instead of triggering the button, pressing the spacebar causes the page to jump down when the button is in f ...
I am currently working with Nuxt version 3.5.1 and Vuejs version 3.3, however, I am encountering an issue where the defineModel macro always returns undefined. I am unsure why this is happening? <template> <input v-model="count"& ...
Imagine an app that can place input text fields on top of an image, creating a workspace. The challenge is to position these fields using specific coordinates (top, left, width, height) that are relative to the image itself (top/left = 0/0). How can one ac ...
I've managed to put together something that functions as intended, but I'm facing an issue where I get a comma between entries when there are multiple ones. Here's the code snippet: chrome.runtime.onMessage.addListener(function (message, s ...
I've been working on a project that involves playing sounds for each letter in a list of text. However, I'm encountering an issue where only the last sound file is played instead of looping through every element. I've attempted to delay the ...