After reviewing your code and making some adjustments, I have formatted it for you. It appears that the styling was placed incorrectly outside of the media query curly braces. To fix this, all styling should be moved inside the curly braces immediately after each query declaration as shown below:
@media (min-width: 991px) and (max-width: 768px) {
.container,
.container1,
.container2 .container3 {
float: left;
}
.container1 {
width: 50%;
}
.container2 {
width: 50%;
}
.container3 {
width: 100%;
}
} /*****Desktop *****/
@media (min-width: 1366px) and (max-width: 992px) {
.container,
.container1,
.container2 .container3 {
float: left;
}
.container1 {
width: 33.33%;
}
.container2 {
width: 33.33%;
}
.container3 {
width: 33.33%;
}
}
This adjustment should resolve the issue you were experiencing.
Best regards!
It seems that both media queries are empty according to the provided CSS code:
@media (min-width: 991px) and (max-width:768px){}
.container, .container1, .container2 .container3{ float: left; }
.container1{ width: 50%; } .container2{ width: 50%; }
.container3{ width: 100%; }
/*****Desktop *****/ @media (min-width: 1366px) and (max-width: 992px){}
.container, .container1, .container2 .container3{ float: left; }
.container1{ width: 33.33%; } .container2{ width: 33.33%; } .container3{ width: 33.33%; }
If this is indeed the CSS in use, then the styles described as 'Desktop' will take precedence since they are defined last. This means container1, container2, and container3 will each have 33.33% width.
However, alignment issues may arise if there are default margins and padding set for each element, potentially causing only 2 elements to appear on the first row with the third below them. This could be mistakenly interpreted as the 'tablet' view.
Consider adjusting the positioning of brackets in the media queries as suggested by @MockerNicholas to ensure correct application of styles based on screen size ranges.
To learn more about media queries and their proper usage, refer to resources like MDN.
I am working with an HTML element that contains AngularJS directives: <div class="progress"> <span ng-repeat="timeRangeObject in timeRangeObjects" style="width: {{timeRangeObject.percentage}}%" ...
I'm currently working on enhancing my webpage by enabling the upload of multiple images. However, I'm facing challenges in figuring out how to obtain a valid URL for the image source and to verify if the correct number of files have been uploaded ...
I have successfully managed to slide the div left/right based on the answers below, but I am encountering some issues with the top div. Here are the specific changes I am looking to make: 1. Make both brown lines thinner without affecting the animations. ...
How can I automatically resize this iframe within a div? My current method is not effective. <iframe src="http://www.gamepuma.com/external.html?http://data.gamepuma.com/games/06/crash-bandicoot.swf" width="600" height="400" frameborder="0" margin ...
Can someone guide me on creating a block of images when working with an array of random items? ...
My AJAX upload form is set up and working, but when multiple files are selected they all upload at once. I want to create a separate div for each file to show the progress individually. However, when I try to test the number of files using this code snippe ...
Can anyone offer any suggestions on how to accomplish this task? I attempted using JavaScript with the code below, but it did not yield the desired results. element.readOnly="true"; element.readonly="readonly"; element.disabled="disabled"; I also tried ...
I am building an interactive quiz for users of my app. The questions are table based, and can be answered "yes," "no," or "maybe." If the user answers "no" or "maybe," I would to slide open an informational panel that lives beneath the table. Here is the ...
Currently, I am delving into learning Express and leveraging FS to load my HTML Page. My research on this topic only led me to references of using ASP.NET instead of Express. Here is a snippet from my Server.js file: var express = require('express&a ...
Trying to achieve a smooth animation where one list of tiles moves off screen as another list comes into view. Utilizing Angular's ng-for to iterate through a visible items array, causing only one list technically despite Angular's ngAnimate mod ...
Recently, I encountered some challenges with selenium, specifically the anticaptcha API. Although I managed to resolve that issue, I am currently facing a different problem. Below is my existing code: from time import sleep from selenium import webdriver f ...
Here is the HTML button I am working with: <input ID = "btnModel" value="Submit"> This is how it appears in Firefox: However, when I assign a border-width to it: input#btnModel{ border-width:2px; } it changes to this: 1- It does not revert ...
Within my web application, there are several pages that handle submitted data from forms. I would like to prevent the following scenario: A user creates a form on the client side with identical fields to my original form and sends it to the URL responsibl ...
I am having an issue with exporting tables to Excel using JS. The <table> tag contains some descriptions and a class (<table class="someClassName" border="0" cellpadding="0" cellspacing="0">). When the table is exported to Excel, the Excel fil ...
Is there a way to align a font-awesome icon on the left side of a text paragraph while keeping the text on the right side, even if it's longer and wraps underneath the icon? I've tried various code snippets but haven't found a solution yet. ...
I created a custom BBCode for my PHP website to display tabbed content on a page. After testing the BBCode on a separate webpage and confirming there are no errors, I am facing an issue where the tabbed content is not showing up on the actual posting page. ...
When working with a <table> element, I encountered the need to search for its descendants and direct descendants while avoiding wading through nested tables. The elements I seek lack reasonable IDs, so specific selectors are essential: <html> ...
I am attempting to use AJAX to submit an HTML form. Here is my HTML: <form class="lyrics"> <input type="text" value="" id="song" name="song"> <button type="submit" class="btn btn-info lirik">lyrics</button> </form> ...
Is there a way to retrieve a specific CSS property of an element, even if it is inherited from its parent? The standard jQuery method .css() can help with this. Consider the following HTML structure: <div id="container"> some text<br> ...
Experiencing difficulties with CSS/Bootstrap integration when displayed in an angular2 component. When attempting to display the CSS and HTML content in the Index.html file (with proper CSS and JS references), everything functions correctly. However, once ...