A specific media query not working - html

I have styled the #screen-xs-max and #screen-sm-max. Both of those queries worked. Now I am trying to style #screen-md-max and the styles wont apply to a certain div. Not all styles - just to a particular div. They dont even show up at all when you inspect the element?
HTML:
<div class="screenshot-projects bottom-border wrap" style="background-color:#fff;">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="projects-img">
<img src="~/Images/img-lgipad.png" />
</div>
</div>
</div>
Less:
#media (max-width:#screen-md-max) {
.screenshot-projects {
projects-img {
max-width: 300px!important;
}
}
}
The only style not applying is the one to the image size - it's instead taking up the entire screen, and this only happens once i resize to medium. At xs and s it's max:100%; and it applies.

You forgot the dot
#media (max-width:#screen-md-max) {
.screenshot-projects {
.projects-img {
max-width: 300px!important;
}
}
}

Related

How can you remove an element for different media queries?

For larger screens I have a scenario where I can display an image next to some text like this:
<div class="wrapper">
<div>
<img>
</div>
<div>
<div> text</div>
<div> text</div>
<div> text</div>
</div>
</div>
For smaller screens, I want to eliminate the wrapper so that the image stacks on top of the text; but I can't figure out how to eliminate the div with the wrapper class to let the image stack on top of the image. My issue isn't using media queries, it's eliminating the outer wrapper when I apply the media queries.
Any suggestions?
You can use display:contents for this...
These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.
.wrapper {
display: flex;
}
#media (min-width: 601px) {
.wrapper {
display: contents;
}
}
<div class="wrapper">
<div>
<img src="https://s3.amazonaws.com/baconmockup/img/baconmockup-200-130.jpg" alt="">
</div>
<div>
<div> text</div>
<div> text</div>
<div> text</div>
</div>
</div>
you can use JavaScript to remove the selector nullifying the wrapper.
var wrapper=document.querySelector('.wrapper')
if(window.innerWidth < 500){
wrapper.classList=""
}
UPDATE:
My answer is incorrect-- you apparently can do this with media queries. See Paulie_D's answer to this post for more details.
Original Answer:
You cannot use media queries to eliminate a container while leaving its children in place. The way to do this would be to duplicate the content without the wrapper for smaller screens:
#media (max-width: 800px) {
.showOnLargeScreens {
display: none;
}
}
#media (min-width: 801px) {
.showOnSmallScreens {
display: none;
}
}
<div class="wrapper">
<div class="showOnLargeScreens">
<p>Large screen!</p>
</div>
<p class="showOnSmallScreens">Small screen!</p>
<div>
<div> text</div>
<div> text</div>
<div> text</div>
</div>
</div>

I want to stretch a logo's width and fix the size of logo so that it is clearly visible

The selected logo should be visible enough.I have added media queries but not able to work it properly.The logo can be stretched width wise,but I don't know how to do that.
As of now I have done
<div class="row">
<div class="col-6">
<h3 class="eta m-0">Estimated Delivery Date</h3><br>
<h1 class="textFontAndColor">Friday 29, September</h1>
</div>
<div class="col-6">
<img src="https://cdn.worldvectorlogo.com/logos/united-states-postal-service.svg" class="fill"><br>
<span class="textFontAndColor">EZ00093838993N</span>
</div>
</div>
The image file itself has quite a lot of whitespace around it so if possible maybe using a wrapper div to crop it would help the situation.
The styling here might not work right away, but just by eyeballing I was able to throw something together that at least for me locally worked well enough.
<div class="col-6">
<div class="imgWrapper">
<img class="logo" alt="" src="https://cdn.worldvectorlogo.com/logos/united-states-postal-service.svg" class="fill">
</div>
</div>
.imgWrapper {
width: 400px;
height: 150px;
overflow: hidden;
}
.logo {
width: 300px;
height: 300px;
margin: -75px 0 0 -300px;
}
So the imgWrappers width and height controls the overall viewpoint thats to be shown and with logos width and height you can fix the logo image to be proper size and playing with margins get the position right.
you're using an incorrect media query syntax; the syntax for media queries is:
#media (min-width: 768px) {
selector {
property: value;
}
}
You may also simply provide the image with a unique class name, to avoid unnecessary complicated css selectors as the one you're using.

height working inline but not external css

In the botton of this there is a fullwidth picture with some stairs. I would like to make that around a 500px height.
It works when I set an inline height:
<section class="pv-40 ding-bottom-clear parallax dark-translucent-bg hovered background-img-4">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="testimonial" style="height: 500px;">
</div>
</div>
</div>
</div>
</section>
But when I set the height in css it is not working, and I cannot understand why?
<div class="testimonial controlHeight">
</div>
CSS
.controlHeight {
height: 500px;
}
It is a CSS document with a lot of lines CSS codes, so the document is called. I thought maybe something was overwriting, so I tried to set it at the end of the CSS document, but still not called.
controlHeight is a class selector. Therefore you need to write
.controlHeight {
height: 500px;
}
with the dot at the beginning.
You have:
controlHeight {
height: 500px;
}
Which matches against elements named controlHeight. You want:
.controlHeight {
height: 500px;
}
which matches elements with the class controlHeight.

Image resize in mobile view

I've the following markup for a page which is mobile ready:
<section>
<div class="cover-section">
<img src="img/central-park.jpg" alt="" style="width:100%" class="hoverZoomLink">
</div>
<div class="logo-section">
<div class="container postLeft hiddenClass visibleClass animated fadeInLeft">
<img src="img/logos/instagram.png" alt="">
</div>
</div>
</section>
The problem is, since I provided width:100% for the imgin the mobile view, the whole image is appeared to be proportionate and as a result, very small. (Since this image is very wide).
Is there any way that I can display the image with a min-height:300px without adding the image as a background and make it as cover ? Because the image is being generated dynamically in which case allocating it to a particular css class wouldn't be easy.
There's no other better way around this:
img{/*but target to specific selector that you need*/
min-height: 300px;
max-width: 100%;
}
This produce the responsive result but when minimum height fits the requirement then this starts stretching.
One better solution is to use image as background and using css like this produce better experience with responsive image:
.cover-section{/*remove img inside this selector to use it as background*/
background: url(image-path.jpg) no-repeat center;
background-size: cover;/*don't forget to use vendor prefixes*/
min-height: 300px;
max-width: 100%;
}
You could always use media queries to handle CSS for mobile devices. Something like follows : (I've moved your img styling to a class 'cover')
.cover {
width:100%;
}
#media screen and (max-width: 500px) {
.cover {
min-height: 300px;
}
}
</style>
<section>
<div class="cover-section">
<img src="img/central-park.jpg" alt="" class="cover hoverZoomLink">
</div>
<div class="logo-section">
<div class="container postLeft hiddenClass visibleClass animated fadeInLeft">
<img src="img/logos/instagram.png" alt="">
</div>
</div>
</section>
Not sure if this is what you want.

Why is the :not selector not working

I am trying to figure out why the not selector is not working. Here is my code:
http://jsfiddle.net/8CKJa/15/
CSS:
#full-content, #mobile-content {
display: none;
}
.collapsed .make #mobile-content {
display: block;
}
.content:not(.collapsed) .make #full-content {
display: block;
}
HTML:
<div class="content">
<div class="content collapsed">
<div id="car">
<div class="make">
<div id="full-content">
full content
</div>
<div id="mobile-content">
mobile content
</div>
</div>
</div>
</div>
</div>
I am trying to hide the full-content div. As you can see .content:not(.collapsed) is not suppose to match any of the divs but it is matching the full-content div. How can I hide the full-content div. I am not sure how many .content parents there will be. The collapsed class can disappear if the menu is expanded.
The :not() selector is working as expected. The issue is that your wrapper div has the class of content without collapsed and then you have one with the class collapsed. Removing the first div makes it work as expected.
http://jsfiddle.net/3L7ym/
<div class="content collapsed">
<div id="car">
<div class="make">
<div id="full-content">
full content
</div>
<div id="mobile-content">
mobile content
</div>
</div>
</div>
</div>
Presuming you are looking to key off of .collapsed and you can't know ahead of time how many .content containers you'll have, you may be able to simplify the whole thing by removing the :not selector:
.collapsed #mobile-content {
display: block;
}
.collapsed #full-content, #mobile-content {
display: none;
}
Fiddle here.