I am in need of a stylesheet that works well for both print and screens with decent width.
When I write the following code, I expect it to be clear:
@media print or (screen and (min-width: 801px)) {
Rules here
}
Unfortunately, this code does not achieve what I need it to.
Can someone please help me with the correct syntax?
Give this a shot (use a comma to separate multiple independent conditions/queries):
@media print, screen and (min-width: 801px) {
Implement the rules in this section
}
Give this a shot:
@media print, (min-width: 801px) {
Insert your rules here
}
This is specifically for an OR condition.
Just a heads up, if you want to use an AND condition, it would look like this:
@media print and (min-width: 801px) {
Insert your rules here
}
@media print, screen and (min-width: 801px) {
.intro_text{
border: solid 1px blue;
}
}
Successfully tested on Mac devices using Safari, Chrome, and Firefox. It's important to note the use of commas and minimal parentheses:
"Multiple media queries can be combined into a list separated by commas."
Based on the guidelines:
Media features should be enclosed in parentheses and connected using the and or or keywords, like (color) and (min-width: 600px), instead of using semicolons.
"Media conditions can be grouped by using parentheses () which can then be nested within a condition just like a single media query."
Combining and, or, and not in a media query at the same level is not allowed. For clarity, parentheses should be used to group conditions with a specific conjunction, such as (color) and ((pointer) or (hover)) or ((color) and (pointer)) or (hover). These groupings have distinct meanings, where the evaluation depends on the conditions being met or not.
While it seems that using parentheses should work, there may be confusion between "Media Queries" and "Media Features." Some parts of the specification might be ambiguous, like the mention of "semicolons" in the excerpt above.
Is there a way to customize this Bootstrap 3 admin template? https://getbootstrap.com/docs/3.3/examples/dashboard/ I want to make some changes like removing the top fixed navbar and shifting everything up by 50px (as defined in dashboard.css). However, I ...
I have been struggling since yesterday to make this work. I just can't seem to get these flex items to fill the container equally in width and height. No matter what I try, it's not cooperating. <html> <meta charset="utf-8"> ...
When it comes to CSS, I must admit that it's not my strong suit. My current challenge is to create two boxes or divs where one remains fixed in the center of the page, while the other adapts and positions itself right next to the first one. Essentiall ...
I need help with changing the opacity of a specific area on an image map when clicked. The image has three areas, but I only want to target and change the opacity of the test2 area regardless of which area is clicked. Since my knowledge of jQuery syntax is ...
Can anyone assist me with this problem? I am currently utilizing bootstrap cards to create a section on my website. However, I am encountering an issue with the circular images of the cards. I want to prevent my images from getting stretched when placed i ...
Looking to create a dynamic page using jQuery that alternates between different large background images for a fading effect. How can I achieve this? ...
My webpage is using nivoslider to display images. However, I am facing an issue where the images are overflowing one by one until the page fully loads. I have tried setting the overflow:hidden property in the CSS but it doesn't seem to correct the pro ...
I need to create an anchor element <a> that resembles an HTML button. However, I am struggling to find the default background color for the input type button. ...
Currently, I'm working on implementing a hide/show function for comments using JavaScript. Fortunately, I was able to find a helpful solution here (thanks to "PiggyPlex" for providing the solution on How can I hide/show a div when a button is clicked? ...
Currently, I am focusing on developing responsive web design and looking for ways to avoid creating multiple versions of each page based on screen width variations. The struggle lies in managing font sizes effectively. While attempting to style them using ...
I have a navigation bar on my website with a set of sub-menus that appear when hovered over. I want to make the navigation bar change color dynamically each time it is hovered over. Additionally, I would like to add a range of colors to choose from. For ...
I am facing a problem where 2 elements are not responding to the specified margins of margin: 260px 0 0 0; or margin-top: 260px;. Despite inspecting the elements in IE's dev tools and confirming that the margin is set, the elements appear at the top o ...
I need help understanding the distinction between element:first-child and element:first-of-type Let's consider a scenario where you have a div element div:first-child → Refers to all <div> elements that are the first child of their parent. ...
I'm attempting to style some radio buttons with a bold red border, but I'm having trouble getting it to display correctly in the latest versions of Firefox and Chrome. It works fine in IE9/IE8. For each input element that is required on my form, ...
I am trying to implement a drop-down list with bullets using Angular 2, JavaScript, and CSS. Although I have managed to create the drop-down list, I am facing difficulty in adding bullets to the list items. Unfortunately, I have found that jQuery and Boot ...
Seeking guidance as a beginner web developer. I am currently working on adding a transparent logo to my website, but the white background is showing up behind the logo. How can I fix this issue? Here is the link to the image - Here is the HTML & ...
Can anyone assist me with scaling background image size properly? code: http://codepen.io/AnilSimon123/pen/JRBRZa Below is the code snippet: .bgimage{ background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vec ...
I'm encountering an issue in my example where the last </li> doesn't display properly when using :last-child. In the provided code, you can observe that when I target the last element with the class "aa," it shows the "+ Add" text. &.a ...
I'm trying to implement a Parallax scrolling effect on my Bootstrap 4 slider. However, every time the slider switches to the next image, the image needs to readjust itself into place. How can I avoid this? .customOverlayText { position: absolute; ...
I have a group of "n" "li" elements that I would like to split into "x" subsets using jQuery. Each subset should contain 5 "li" elements, and I also want to assign a different class to each subset. <ul> <li>text1</li> <li>text2&l ...