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.
Previously, I utilized the following code to extract text from the data-placeholder attribute and apply it as a placeholder for my div. [contentEditable=true]:empty:not(:focus):before { content:attr(data-placeholder) } While this method worked well b ...
I have an array of items, each containing a background property with a URL to an image. Here is my array: https://i.sstatic.net/jfrV0.png Here is the HTML structure: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol ...
I am currently working on an HTML project where I need to display objects from an array using Angular. My goal is to only show the objects in the array that are not empty. While I have managed to hide the content of empty objects, the boxes holding this co ...
After browsing , I noticed an interesting image loading style. The website initially shows a patterned image before revealing the actual content. This method creates visually appealing content while waiting for the entire webpage to load. Upon inspecting ...
I am attempting to implement a "double click" event on all text HTML elements (p, span, h1, h2, etc.) across all pages in order to open a popup. I believe there should be a more efficient way than adding (dblclick)="function()" to each individual element. ...
I'm in the process of developing a chat application with PHP. Everything is functioning properly, but I have encountered a potential loophole. I am implementing AJAX to fetch chat data as the user scrolls, similar to platforms like Facebook and Twitte ...
I am currently in the process of learning Bootstrap 5 and decided to create a simple carousel by referring to the official documentation on Bootstrap 5 Carousel. Following their instructions, I copied their code and integrated it into my template. Howeve ...
I am working with a structure that looks like this: <div class="wrapper"...> <a href="#"...>blah</a> <div class="post"...>stuff</div> </div> This structure repeats multiple times on a dynamic page. I am looking f ...
Having trouble with mobile view in my simple HTML Bootstrap code. Everything looks fine in desktop view but not in mobile. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < ...
Is it possible to refresh my view from the navigation bar without displaying the server folder? I have the html5Mode activated: if(window.history && window.history.pushState) { $locationProvider.html5Mode(true); } ...
Here is a screenshot showing the issue: https://i.stack.imgur.com/kSVQj.png. The quote on my website does not align to the top as expected. Can anyone provide a solution for this? Below is the corresponding code: <body> <div id="container"> ...
I've made the decision to incorporate a sidebar on the left side of all pages across my website. This sidebar must have the ability to be either hidden or shown, without overlapping the existing content on the page. However, I'm encountering an ...
After reproducing my issue on a smaller scale for easier handling, I am now aiming to implement an onclick function that reveals the hidden content inside each column. The plan is to initially hide the content using display: none and then switch it to disp ...
Seeking assistance in adjusting the background color of my header upon scrolling. This is my current implementation: header.component.ts export class HeaderComponent { ngOnInit(): void { const header = document.querySelector('.header'); ...
I created an automatic image scroller div consisting of a ul with small images. The aim is to have a basic scroller that starts running once the page loads. It functions perfectly when I test the code (HTML, CSS, and a JS file with jQuery) locally in a bro ...
I have a database containing HTML code for a table. I would like to display this code in its original form within a textarea so that I can edit it. However, when I try to echo the code, it appears in compiled form as a table rather than the original HTML ...
I am encountering an issue with my Bootstrap navigation menu that uses a flex container (). The goal is to have horizontal scrolling for the menu items when they surpass the width of the container. I have implemented the following CSS style on the containe ...
I quickly put together a microsite that is located at . If your internet connection isn't fast or nothing is cached, you may notice that the background-images used for CSS image-text replacement are the last items to load (especially the h1#head with ...
Similar Question: MailTo with HTML body I am looking to utilize JavaScript to send emails. I came across this helpful post: Sending emails with JavaScript. My goal is to include images, bold text, and color changes in the email content. Does anyone h ...
Here is the HTML code snippet: <tr ng-repeat="c in client"> <td><input type="text" id="id" value="{{c.id}}" onclick="display();"></input></td> <td><input type="text" value="{{c.fname}}"></td> </ ...