I have an company's employee team page I am working on HERE.
My problem is that the employee's images will not scale down when they appear on mobile.
My CSS is like this:
#media (max-width: 767px) {
.employee-image {
max-width: 85%;
max-height: 85%;
}
}
Maybe I have conflicting CSS somewhere? I do not know.
Page link: http://texasca.com/team
CSS Link: http://texasca.com/includes/team.css
It looks like you are using bootstrap. In bootstrap you have a helper class called .img-responsive. You can replace .employee-image with .img-responsive and I think you will get the desired result.
To be more clear - Just add the img-responsive class to the desired images.
Related
We have large react application without using any UI framework, we build all UI component our own.
Now we need to make landing page portion responsive (it's part of the application), and we need to add a lot of #media query.
The first thing come to my mind is tailwindcss library that could help on that, it's more lightweight than bootstrap, and materialUI.
But I am not sure would that would be a best practice here to include a whole UI utility for responsiveness, or if not, is there other way to achieve responsiveness without dealing with a lot of #media query?
You could try using the CSS clamp function. This function takes
in three arguments. The first being the minimum value, the second
one the preferred value and a maximum value. For example:
.element {
width: clamp(100px, 75%, 300px);
}
And here's how you would do the exact same thing with media queries:
.element {
width: 75%;
}
#media (max-width: 768px) {
.element {
width: 100px;
}
}
#media (max-width: 1200px) {
.element {
width: 300px;
}
}
Here's a link to the documentation on the CSS clamp function:
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
I hope this helped you.
I have a website that my client needs to set the cart menu item visible beside the menu button when is on mobile device but I don't know what is the better way to do this. Does anyone of you have any tips ? I appreciate in advance. Bellow is an image of the item highlighted in yellow that I want to set visible :
Have a closer look at Bootstrap's Responsive Utilities documentation. You can use the hidden- or visible- classes.
To hide on desktops add the following classes to your element:
hidden-md hidden-lg
To hide on mobile use:
hidden-xs hidden-sm
Here's a jsFiddle demo.
By adding following class you can hide it in big screen and show in mobile.
col-visible-xs col-visible-sm col-hidden-md col-hidden-lg
For hidding in big screen use following class
col-hidden-md col-hidden-lg
Showing in small screen use following class
col-visible-xs col-visible-sm
You could search something for this in jquery and showing and hiding blocks. a very simple way would be to use media queries in CSS. It isn't the best solution but it is the easiest one.
#media screen and (min-width: 768px) {
.shopping-cart {
display: none;
}
}
#media screen and (max-width: 768px) {
.shopping-cart {
display: block
}
}
I need a media query (or similar) using pure CSS, HTML or possibly LESS (as long althogh pre-compiled won't work) to apply a particular class to an ID depending on the screen height. I'm setting classes defined by Add2Any - not css properties.
jsfiddle
What I want to do is set the div #add2any to this for small screens.
<div id="add2any" class="a2a_kit a2a_default_style">
Otherwise I want this:
<div id="add2any" class="a2a_kit a2a_kit_size_32 a2a_default_style">
Is this possible, and how?
Looking for a non-javascript/not Jquery solution to avoid time lag and having a <div> for each style and showing only the relevant one.
Background
The idea is to change the layout and size of the AddToAny bar for small screens, so instead of 32px images it displays a totally different style of compact bar, with less buttons, and using AddToAny's classes means future changes they make would not be dependent on fixed css in my stylesheets. Browser compatibility is important.
CSS so far
#media screen and (max-height: 430px) {
.a2a_button_google_plus, .a2a_button_pinterest, .a2a_button_print { display:none;}
#add2any a, hr#add2any, hr#add2any a, .a2a_divider { font-size: 15px; padding-top:2px; padding-bottom:-2px; }
.a2a_divider { top:5px ; position: relative}
}
Edit
Unable to find solution from any of these, I'm using foundation framework.
conditional CSS based upon div not screen
Toggle mobile view in Foundation using CSS class or JS
How to toggle class using pure javascript in html
**Edit 2 **
Suggestions of using Less or Sass from this question seem like overkill, since the solution would be needed on every page.
Self-hosting the script and adding some javacript to it might be a better choice, the class names look certain to remain the same even if the script changes since all Customize instructions encourage direct use of AddToAny's class names.
Edited
If you have this html:
<div class="a2a_kit a2a_default_style">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
You can make a media query like this:
/* first state */
.a2a_kit { display: block; }
.a2a_kit.a2a_kit_size_32 { display: none; }
#media screen and (max-height: 430px) {
/* reverse behaviour on max-height 430 px */
.a2a_kit { display: none; }
.a2a_kit.a2a_kit_size_32 { display: block; }
}
You just need to set up modified styles in your media queries:
#add2any {
/* any styles you want to apply all the time */
background-color: blue;
width: 100px;
color: white;
}
#media (min-width: 420px) and (max-width: 760px) {
/* styles when screen is greater than 420px wide but less than 760px */
/* omitting the 'and (max-width: 760px)' would cause these styles to apply at any width above 420px unless overridden by another media query */
#div1 {
background-color: red;
width: 300px;
color: yellow;
}
}
#media (min-width: 760px) {
/* styles when screen is greater than 760px wide */
#div1 {
background-color: green;
width: 600px;
}
}
JSFiddle Demo
*if you don't want to style based on the ID, you can add a unique class and style that
I wanted to have large pictures be hidden for mobile devices. Looking at this site I put the following styles in my css:
//medium+ screen sizes
#media (min-width:992px) {
.desktop {
display:block !important;
}
}
//small screen sizes
#media (max-width:991px) {
.mobile {
display:block !important;
}
.desktop {
display:none !important;
}
}
Then I apply the class in my html like this:
<img class="desktop" src="img/test/test.jpg"
alt="jhkjhjk" height="600" width="900">
But when I shrink my browser window the image remains there. Have I missed something?
Since you are using Boostrap, you can do it even easier.
Append a class of
visible-md
to your image.
md is for >992 px.
Check out the easy classes you can use
http://getbootstrap.com/css/#responsive-utilities
EDIT: probably wanna do visible-md visible-lg if you're gonna do visibles. The chart explains all the combinations.
I am looking for how to remove specific images with media queries. I am using HTML/CSS for a webpage.
Here is the code I currently have, which does not work (it was experimental):
#media (min-width:0px) and (max-width:1200px) {
LEVEL 1.png, level 6.png, http://placehold.it/160x600, http://placehold.it/100x100 {
display:none;
}
}
Any suggestions would be great, thanks.
Just give the images a class and then in the media query:
.that-class-name {
display: none;
}
Also, you should probably remove min-width: 0. I'm wondering if something less than 1200px would be better for for max-width as well. That's very wide.
Here you have to add a class inside the your media query
#media (min-width:0px) and (max-width:1200px)
.img { display: none; margin: 0 auto;} // your image class or can be img tag
}
and just now i answered the same question Here