Currently, my HTML code looks like this:
HTML
<div>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
I want to utilize flexbox to create the layouts shown in the following images.
The design is correct on desktop but incorrect on mobile, as seen in this image:
To achieve your desired look, you have two options: utilizing the flexbox method or employing a grid system. While there are other methods available, these are the main choices we have.
My recommendation is to use a grid system instead of flex if you aim for a dynamic layout.
flexbox).one, .two, .three {
height: 50px;
width: 100px;
margin: 20px;
background-color: blue;
}
.main {
display: flex;
}
@media only screen and (max-width: 368px) {
.main {
display: block;
}
.two {
position: absolute;
left:130px;
top:2px;
height: 120px;
background-color: red;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Option 1</title>
</head>
<body>
<div class="main">
<div class="one">Left</div>
<div class="two">Center</div>
<div class="three">Right</div>
</div>
</body>
</html>grid system.grid-container {
display: grid;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-column: 1;
grid-row: 1;
}
.item2 {
grid-column: 2;
grid-row: 1;
}
.item3 {
grid-column: 3;
grid-row: 1;
}
@media only screen and (max-width: 368px) {
.item1 {
grid-column: 1 / span 2;
grid-row: 1;
}
.item2 {
grid-column: 3;
grid-row: 1 / span 2;
}
.item3 {
grid-column: 1 / 3;
grid-row: 2;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Left</div>
<div class="grid-item item2">Center</div>
<div class="grid-item item3">Right</div>
</div>
</body>
</html>I hope this guidance helps you in reaching your design objectives. Enjoy implementing it!
When I click on a link and try to add a class, it's not working. I want to create a "modal" div. Here is the PHP/HTML code: <?php if(isset($_GET['ido'])) { ?> <div id="modal" class="modal" style="background: blue; width: 1 ...
Check out my demonstration here: http://jsfiddle.net/x01heLm2/ I am trying to achieve two goals with this code. Goal number one is to have the mini thumbnail still appear when hovering over the .box element. However, I do not want the hover event to be tr ...
I have implemented a JQuery plugin for dropdown menus that can be found at the following link: https://code.google.com/p/select-box/ Currently, I am facing an issue where the script only seems to work for the first dropdown menu out of 4. I am unsure abo ...
I have an array object called farms containing values. The code uses the farms.map function, but I encountered a warning instructing me to provide a unique key for each child element in React Native. Warning: Each child in a list should have a unique " ...
My current setup involves a mask that displays properly, but when I try to type in it, the cursor just jumps to the end of the line. I'm unsure what mistake I might be making here. I attempted putting all the props in the parent component and passing ...
As a programming novice, I received an assignment from my teacher but despite following the instructions, the colors do not appear on the page when opened. My goal is to create a gradient background color within the main element, but unfortunately, it doe ...
For my assignment, I'm tasked with creating a roulette spin wheel code in JavaScript without using any plugins. I need to incorporate some conditions before executing the code, particularly for slowing down the speed of the roulette spin. Additionally ...
Within my JSON data, I have multiple products defined. My goal is to loop through this JSON and display these products side by side on a web page for easy comparison. Initially, I envision structuring them in columns and then rows: https://i.sstatic.net/K ...
I have a task at hand where I need to display a list of profiles related to each user in a single cell with multiple rows within my gridview. How can I achieve this? This is what I have attempted: <asp:BoundField DataField="UserName" HeaderText ...
I'm trying to figure out a way to disable certain components, such as TouchableOpacity and Button, by adding a disabled prop to them. I am using React Native version greater than 0.60 and functional components. However, I only want to disable specifi ...
Hey there, I'm having an issue where the class is being applied to the button when pressed instead of the selected text. Here's my current code: The button needs to be a div, but it might be causing the problem. I just want the highlighted text ...
Seeking assistance as I am very interested in this topic. I am looking to have autocomplete fetch data source only once during page load. I have attempted two methods. The first method, using $.ajax(GET/POST) was successful $.ajax({ type: "GET", u ...
After setting up my Evidently project with one feature and a custom metric, I am facing an issue where Evidently is failing to record any events. Despite simplifying the troubleshooting process by using command line evaluation and event sending, the proble ...
I am hoping to display images that users upload along with their surveys. After logging this.props.surveys, I can see there is a property called imageUrl in it. renderImage() { console.log(this.props.surveys); } // output: 0: body: "asdfg" imageUrl ...
One challenge I'm facing is how to assign a value to a variable in an API request and then access it outside of the request. The file I'm working on only uses export default, isn't wrapped in a class that extends React.Component, and doesn&a ...
I am a beginner in Node.JS and currently working on developing a MERN movie ticket booking system. The front-end code snippet provided below showcases the function responsible for uploading an image for a specific movie: export const uploadMovieImage = ( ...
I'm currently working on a form and encountering some validation issues. HTML: <form id="regForm" class="form-group" method="POST" action="signup.php"> <div class="col-md-12"> <h2>Job Pocket</h2> </div> <di ...
I have a button background class that I want to reuse multiple times. How can I keep all the common styles separate and only change the URL multiple times? Here is my CSS: .menuBtnColour{ position: relative; //common top: 0;//common left: 0;/ ...
In our development process, we are crafting a widget designed to be seamlessly integrated into external websites. This integration involves the dynamic injection of a div element within the body of the page using Javascript. While the widget appears satis ...
Looking to achieve the fadeIn and fadeOut effect on an element or any other div tag with a delay of 3 seconds. Please provide a CSS-based solution without using jQuery. Thank you! ...