I am struggling to align items on mobile resolution in a specific order:
Image
Content
Image2
Content2
I have created a pen showcasing this issue on Codepen.
Initially, I attempted using transform: translate, but it only worked for the content. The images did not resize when the window size was adjusted.
I considered swapping the items and then aligning them since they are coded in the following order:
Image
Content
Content2
Image2
However, this approach did not yield the desired result.
If you want to rearrange the image/content order, you can utilize display: flex; with order. Essentially, set the order of the p element within the 2nd .col-md-12 to order: 2 so it appears after the image.
You can implement a media query to execute this switch only on smaller devices.
* {
box-sizing: border-box;
}
.col-md-12 {
display: flex;
}
.col-md-12 img {
width: 200px;
margin: 0 10px;
}
@media screen and (max-width: 650px) {
.col-md-12 {
flex-direction: column;
}
.col-md-12:nth-child(2) > *:first-child {
order: 2;
}
.col-md-12 img {
width: 100%;
margin: 0;
}
}<div id="wrapper">
<div class="container">
<div class="row col-md-12 " id="content">
<div class="col-md-12">
<p class="obrazek1">
<img class="img-responsive" src="https://cdn.athemes.com/wp-content/uploads/Original-JPG-Image.jpg">
</p>
<div class=" side-arrow-no-border cast1" >Sushi is always prepared using the freshest and best ingredients. It is recommended to consume sushi immediately. Professional chefs select the freshest and highest quality fish for sushi preparation. Brief freezing of fish below 18°C before sushi preparation
is not harmful, in fact, professionals recommend it. Health studies have shown that sushi has very positive dietary effects on the human body. Raw fish contains important substances, minerals, and proteins. In addition, studies have demonstrated that wasabi
(Japanese horseradish) used to flavor the rice, along with its components, inhibits bacteria growth in the oral cavity, restricts cancer cell proliferation, and has anti-asthmatic effects. </div>
</div>
<div class="col-md-12">
<p class="cast2 side-arrow">
Traditional Japanese dish sushi originated in Southeast Asia. The history of sushi dates back to the 4th century BCE. Fish were a primary source of protein and natural fermentation (a process of preserving food) with rice was used to store them. Fish would
be stored in rice and consumed after several months of fermentation. The fermented rice itself was not eaten. This practice spread through China and reached Japan in the 8th century CE. The Japanese combined the consumption of raw fish with rice, creating
a unique traditional Japanese dish. The rice was delicately flavored with vinegar and combined not only with fish but also various vegetables and dried ingredients.
</p>
<div class="side-arrow-no-border obrazek2 ">
<img class="img-responsive" src="http://demo.phpgang.com/crop-images/demo_files/pool.jpg">
</div>
</div>
</div>
</div>
</div>To enhance the layout, try rearranging the second image and content while updating the media queries to switch from translate to display: block; You should be able to make further adjustments based on that.
@media screen and (max-width: 1199px) {
.obrazek1, .obrazek2 {display: block; max-width: 300px}
}
@media screen and (max-width: 991px) {
.obrazek1 {display: block;}
.obrazek2 {width: 40%; display: block;}
}
@media screen and (max-width: 663px) {
.obrazek1 {min-width: 200px; display: block;}
.cast1 {display: block; border: none; text-align: center; width: 70%
!important}
.obrazek2 {border: none; min-width: 200px; display: block;}
.cast2 {display: block; border: none; text-align: center; width: 70%
!important}
}
I've been attempting to integrate this carousel into my Bootstrap 5 webpage. I found it on Codepen - https://codepen.io/sahil-verma/pen/wxXryx Thus far, I've copied the code into my webpage and linked the corresponding CSS within style tags, sim ...
I am currently using express and heroku to host a prototype of a landing page. While the webpage functions properly when running locally, I encounter font loading issues when accessing it on heroku most of the time... The CSS files are located under /pub ...
I am relatively new to using mysqli and while I believe I have grasped the basics, I am struggling with adding a button to a table that I can trigger. Here is the code snippet I am working with: while($row = mysqli_fetch_array($result)) { echo "<tr al ...
Check out the implementation of vertical header flow in Datatables by visiting: https://jsfiddle.net/2unr54zc/ While I have successfully fixed the columns on horizontal scroll, I'm facing difficulty in fixing the first two rows when vertically scroll ...
I created a form that has multiple input fields, and users have the option to enter values or leave them blank. Each input field is accompanied by a hidden input field which contains a specific id unique to the corresponding visible input field. To disable ...
I have a login form that triggers a JavaScript function upon submission. This function calls a PHP page to process the input. The issue I'm facing is with how the redirections are displayed based on the user's role type. It attempts to display t ...
I'm struggling to get my background image to fit 100% screen width and height. Unfortunately, the image isn't showing up at all. Can anyone tell me what I'm doing wrong? Below is the code I've tried, but for some reason, it's not ...
UPDATE: The issue has been resolved. It turns out that the navbar was not extending to 100% width and reaching the edges of the screen. I am currently facing a challenge with a Bootstrap 4 navbar, similar to issues I encountered with the previous version. ...
Currently working on constructing an HTML form containing input fields to read and modify data from an XML file. The initial task involves loading values into the input fields upon page load, but unfortunately, it is not functioning as expected. < ...
In my angular and css GUI, each line is represented as an li inside a ul with a span. The functionality includes a pop-up opening when clicking on the li background and another action occurring when pressing the button (as intended). The issue arises when ...
Struggling to achieve responsive design on my Pages, especially with changing text size when the screen is small. I've been following all the correct steps and maintaining the right order. However, whenever I set 'sm', it seems to override a ...
I am facing an issue in my CSS code while trying to create a footer. The background color is not filling the width of the screen, and I had encountered the same problem earlier. Here is how it looks: (https://i.sstatic.net/5VxYU.png) HTML Code: *{ ma ...
Is there a way to automatically populate the Address field of a client in a textarea based on the input of the client's name in an input field? I have created a 'for loop' to retrieve a datalist of client names. For the address, I retrieved ...
I have been working on a CSS-only drop-down menu and I am encountering an issue where other content seems to be showing through. Despite my efforts, I can't figure out why this is happening. If you would like to take a look, here is the link: http:// ...
I encountered a challenge while working on an HTML project. I included a checkbox that should highlight all text input fields when checked. However, I'm facing an issue where some of the input fields within tables are not being affected by my code. An ...
I am trying to achieve a fading effect for the background color of a div that contains a form. The solid background should fade out to transparent based on a pixel variable, allowing the background behind it to show through. This pixel value determines how ...
Is there a way to preview a PDF using Base64 data? Here's the HTML code: And here's the TypeScript code: let file = new Blob([byte64String],{type:'application/pdf'}); this.pdfSourceUrl = URL.createObjectURL(file); When I try to prev ...
Why was the CSS style "background-position: center;" missed? It was because the background will override the background-position property. <html> <head> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" ...
Currently facing a challenge with retrieving API data in my AngularJS project. The code below successfully fetches the data and logs it on the console as an array, but I am unable to access and utilize it in the front-end. Please note that the placeholder ...
Should I place a tag directly inside in Bootstrap 3? or is it better to have each inside .row>.col-md-# Is this layout acceptable, or could it potentially cause issues on mobile devices? <div class="container"> <h1>Lorem ipsum dolor sit ...