I'm working on a page with a sidebar that contains elements on desktop. When viewed on mobile, the sidebar moves under the main page. However, I would like those elements to be displayed above the main page on mobile, similar to this:
Any suggestions on how to make this happen?
If you're looking to adjust the positioning of elements on Desktop versus Mobile resolutions, one way to do this is by using the pull-right Bootstrap class for right-aligned elements. Here's an example:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.elem,
.main,
.sidebar {
border: 1px solid #000;
}
.elem {
height: 150px;
}
.main {
height: 400px;
}
.sidebar {
height: 250px;
}<div class="container text-center">
<div class="row">
<div class="col-xs-12 col-sm-4 pull-right elem">Element</div>
<div class="col-xs-12 col-sm-8 main">Main Page</div>
<div class="col-xs-12 col-sm-4 pull-right sidebar">Sidebar</div>
</div>
</div>One way to achieve this layout is by using a css media query. When viewing the website on a desktop, the .mainpage will be positioned on the left side, while the .element and .sidebar will be on the right side. However, if the viewport width is less than or equal to 640px, then the elements will align differently.
.mainpage{
width:50%;
height:400px;
background:#f1f;
float:left;
}
.element{
width:50%;
height:200px;
background:#f22;
float:right;
}
.sidebar{
width:50%;
height:200px;
background:#ccc;
float:right;
}
@media screen and (max-width : 640px){
.mainpage{
width:100%;
height:200px;
}
.element{
width:100%;
height:200px;
}
.sidebar{
width:100%;
height:200px;
}
}<div class="element">element</div>
<div class="mainpage">main page</div>
<div class="sidebar">sidebar</div>Currently, I am working on mapping material-ui cards with dynamic content from a JSON object, resulting in varying card heights. I have successfully set a fixed height for each card, but the content is not aligned correctly. You can see the issue in this ...
I am struggling with my Spring Boot application that was generated using . I am having difficulty getting it to return JSON instead of HTML. Here is a snippet of the code: [@CrossOrigin(origins="http://localhost:4200",maxAge=3600) @RestController @Request ...
How can I position the album cover div to the right within the card? I attempted using the align-self: end property, but it did not work. Can someone please assist? .card { border: 1px red solid; width: 450px; height: 150px; border-radius: 5px; ...
Is there a method to eliminate the transparency of content/images within a <div> that is transparent? Below is the provided HTML: <div id="main-button-wrapper" class="left"> <div id="button-bg-layer" class="box-bg-layer corner ...
I'm facing a challenge with my web form that includes a table allowing users to delete rows before submitting. Although there are no input fields in the table, I need to capture the data from these rows when the form is submitted. The issue is that th ...
Is it possible to style a standard div container using the same styling as jQuery dialogs? I am looking to create a div panel with text content but with the title bar styling similar to that of jQuery UI dialog boxes. Appreciate your assistance in advance ...
cmd > java -version Java Version : "1.7.0_11" (Updated) Java(TM) SE Runtime Environment (build 1.7.0_11-b21) Java HotSpot(TM) Client VM (build 23.6-b04, mixed mode, sharing) browsers = IE7,IE8,IE9 (The functionality works smoothly in Google Chrome and ...
//UPDATE: I've made some changes to the Pen, so now everyone can view the solution! Check it out here. My goal is quite simple in my opinion. I want to create an image that zooms in when you hover over it but doesn't increase in size. I attempte ...
I'm currently trying to create a pure CSS dropdown menu on hover by following this tutorial. However, despite multiple attempts, I'm still stuck and in need of some clear explanations for my issue. <div class="navbar"> ...
I am looking to implement a collision detection function in JavaScript for canvas. Specifically, I have coin and piggy bank objects and want to create a function that triggers the disappearance of a coin object when it comes into contact with a piggy bank. ...
Setting up an ng-class in my app My current setup looks like this: $scope.myClass = 'class-A'; Performing a task here... $scope.myClass ='class-B'; Performing another task here $scope.myClass ='class-C'; html <div n ...
My test application is designed to record camera footage and send the file to a directory on my server. The main code for this application is shown below: <!DOCTYPE html> <html> <head> <script src="https://cdn.WebRTC-E ...
I have implemented a select box where selecting a value in the main select box "Domains" will reveal another select box called "Types" such as Diatoms or Flagellates. I have successfully achieved this functionality, but now I am facing an issue with resett ...
body, html{ font-family: 'Lato', sans-serif; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; color: #5a5a5a; } there was a CSS parsing error due to an unrecognized property ...
Hey there, I'm attempting to create an image using a button on canvas. However, I'm facing an issue where I can't draw on the clear canvas. Here's my code: <!doctype html> <html> <head> <meta charset="utf-8"> ...
Having trouble displaying ASCII art on my website using a JavaScript function, the output is not as expected... This is how it should appear: https://i.sstatic.net/MCwPb.png And here is the code I am trying to implement for this purpose: function log ...
I am working on developing a single-page application that fits within one screen with the following structure: There is a fixed header that includes: Two columns (1/3 for left, 2/3 for right) : a logo on the left a breadcrumb on the right. The ...
How can I add a linear gradient to Google Maps? Below is my code snippet. HTML <div id="map"></div> CSS #map{ height:100vh; background: linear-gradient(90deg, #f7f8fa 0%, rgba(247, 248, 250, 0) 18.73%), linear-gradient(180deg, # ...
When I click on the following links: How can I create a new page using JavaScript? Create and dynamically append elements I'm looking to dynamically add HTML elements with JavaScript within a div, but I don't want my code to become overly comp ...
Greetings everyone! I have been struggling to align two divs - one on the right with a width of 30% and the other on the left with 70%. Despite my efforts, I have not been able to find a solution. I am hopeful that someone here can assist me. My setup inv ...