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.
Try hovering over the top left h1 element in this code example You'll notice that it smoothly changes the h1 element to a shade of blue in just 2 seconds. However, the transition doesn't affect the blend mode of the backgrounds. Even though the ...
I need help with hiding a parent div only if all the child items are invisible. I have successfully hidden the parent when there are no children, but I am struggling to figure out how to hide it based on visibility. <div ng-repeat="group in section.gro ...
After experimenting with the script based on the guidance I received from you all, I've encountered another issue. When I click 'login' on the login form, it displays this message: The page isn't redirecting properly. Firefox has detect ...
I am facing an issue while migrating my code from an .html file to a Quasar project. The code runs perfectly fine in the .html file, but I encounter errors when implementing it in Quasar. Here is the original code from the index.html file: <!DOCTYPE ht ...
<a> hyperlink for radio button is not functioning correctly in Chrome. Here is the code segment in question: <td width='7%' bgcolor='#E8E8E8'> <a href='issue.php?admin=Yes&&user=$user'> <inp ...
Question: I have multiple dynamic forms on a web page, each with a file input field. How can I specifically target the correct file input using $(this) in JavaScript? Here is an example of one of my forms: <form enctype="multipart/form-data" action="c ...
In my JavaScript code, I am trying to retrieve the browser window size and then set the size of a div element accordingly. I have two div elements that should adjust based on the window size. For example, if the window size is 568px, div1 should be 38% of ...
I'm currently working on developing a hovercard feature for a social media platform I'm building. The concept involves displaying additional information about a user when their name is hovered over. The hovercard will appear with the user's ...
Currently, I am sending a PHP request to a login handler using the following URL: https://example.com/test.php?username=test123&password=hiuhsda3#24 However, I need to retain the hashtag in either the password or username along with anything that come ...
I have successfully implemented an animation on 3 HTML elements for a landing page I am currently developing. The animations are working as intended, but I am facing an issue where the two lower elements (an h1 tag and a button) briefly appear on the page ...
After spending close to 10 hours on this, I find myself stuck. My restaurant search app is functioning perfectly when I print the output to the terminal. However, I can't seem to figure out how to display it on a new page. Here's a snippet of my ...
Require checkboxes instead of a selection option and have multiple checkbox options. Depending on the checked checkboxes, different form fields should appear. A submit button is needed. I have included some CSS code, but a more detailed CSS code is requir ...
I created a homepage with multiple sections, each linked to from the main menu: <body> <header> <!-- nav used on all pages --> <a href="#nav" class="toggle-nav"> menu <i class="fa fa-bars">< ...
I require assistance on how to extract individual values from an HTML page. I received a response from the PAYU payment gateway team in HTML format, but I need to retrieve specific attribute values related to the transaction details. Below is the response ...
I'm struggling to figure out what to search for in this situation. I've tried piecing together code from others, but it's just not working for me. My ajax function successfully retrieves data from a database through a php page and displays ...
Hey there! I'm currently struggling with implementing transitions for my tool tips. Any assistance would be greatly appreciated! I am looking to have my "fader" divs fade in and out on click of a button, with each transition lasting 5 seconds. It&apo ...
My current project involves using Adobe Edge Animate for the majority of my website, but I am looking to create a mobile version as well. In order to achieve this, I need to transition from onClick events to onTouch events. However, I am struggling to find ...
My application randomly selects three values from an array found within defaultProps and then displays these values inside div elements in the return JSX. It also assigns these values to properties in the state object. I am facing a challenge where I need ...
Here is a script that I created: <script type="text/javascript> $('.storage').html(""); setInterval(function(){ $.get('./playcommand.php', function(data) { if($('.storage').html() !== data){ ...
I am currently working on a personal website project and I decided to use an HTML template from W3Schools. The template includes CSS files sourced from the internet: <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link re ...