I have a website with a full width Slideshow in the header.
The images in the slideshow cannot be cropped.
Right now i set that my slideshow allows has width: 100% and a variable height.
The problem is that on phones (due to the different screen proportions) the slider looks super slim.
As I already said: I cannot crop the images. so i probably have to create a new slider for mobile devices.
What is the best way to do this?
If i just do something like:
<div class="mobileslider">
for mobile devices and
<div class="slider">
for desktops, I could hide one element via css.
However, both sliders would load, wont they?
Whats the most efficient way to do this?
Thank you for your help.
You should just be able to hide the element and display the other one with a couple of media queries based on screen size.
#media only screen and (max-width: 480px) {
.slider {
display: none;
}
}
#media only screen and (min-width: 768px) {
.mobileslider {
display: none;
}
}
Related
I am trying to make a site responsive, and when it scales down, I want to cancel out the images. All my images are in HTML and I am trying to make them not show up as the screen scales down.
For this you can use media-queries.
Example:
#media screen and (max-width: 768px) {
.image-1 {
display: none;
}
}
This will not display the image when the screen size (width) is smaller than 768px.
You can learn more about media-queries here.
CSS media queries are used for this
#media only screen and (max-width: 600px) {
/* anything here will have properties mentioned here
if you want to hide all the images, use "img", else, use your specified class, such as .myImage */
img {
display: none;
}
/* OR */
.images-to-hide {
display: none;
}
}
In (max-width: 600px), you put the maximum screen width after which the styles stop working - or rather - the minimum value needed for these styles to be applied
Here's a more detailed tutorial: W3Schools.com - Media Queries
I have a little problem with my website. If the screen of the device smaller than xyz px the slideshow doesn´t work anymore. And I want to be there a picture instead of the slideshow.
The slideshow that I am using is Owl Carousel
How can I do this?
You can use the CSS media rules.
CSS3 #media Rule
Both elements (image and carrousel) must be in your HTML code.
Without the appropiate CSS media query, both would be displayed, but if you provide the correct rules, you can hide/display the desired element, under each diferent screen size.
.my_carrousel{ display: block; }
.my_image{ display: none; }
#media screen and (max-width: 480px) {
.my_carrousel{ display: none; }
.my_image{ display: block; }
}
I have an example of a website for this question (because I can't figure a way to ask it..)
https://livedemo00.template-help.com/opencart_62166/
As you can see, if you resize the browser width, only the margins resizes, and not the divs inside it.
Is there a way to acheive the result in CSS? Do I have to use Javasciprt to achieve that? Thank you.
In that example the developers are using media breakpoints. These apply different styles to elements depending on the browser window size. A tutorial is here
Basically your CSS looks something like this:
#media screen and (min-width: 500px) {
body {
width: 800px;
}
}
#media screen and (max-width: 500px) {
body {
width: 300px;
}
}
i am trying to build a site with basic css "parallax" effect where the image has a background-attachment:fixed and stays there when you scroll. the code background-size:cover works great in large browsers, but i am noticing when i make screen smaller, sizes 800px or 900px, the images in the div are getting cut off and i only see a little of the image. i've played with changing background-attachment to be background-attachment:contain - when i do that the image shows perfectly in the div but i see a huge space under the image.
http://greendental.mediaworksonline.com/
i've been wracking my brain on this for 2 days. if you could help that would be greatly appreciated. i'm building this to just use css and not jquery.
A fast solution can be put differents resolutions, an example
#media screen and (max-width: 900px) {
.imgblock {
min-height:400px;
}
}
#media screen and (max-width: 400px) {
.imgblock {
min-height:200px;
}
}
Hope this can help you
We are developing a new UI for one our products and for a number of reasons have the need to toggle between two <div> tags depending on whether the device be mobile or desktop. Each <div> will contain appropriate content for either mobile or desktop, but because we only have a single HTML page, we need the ability to turn on one <div> while turning off the other one.
This question is something of a follow up to this SO question which is very similar to what I am asking here. To recap the solution found there, there are two <div>s:
<div class="visible-phone">
content for phone
</div>
<div class="visible-desktop">
content for desktop
</div>
and there are two CSS rules which employ either the maximum or minimum screen resolution:
.visible-phone{
#media (max-width: 480px) { more css }
}
.visible-desktop{
#media (min-width: 768px) { more css }
}
To get to the point, consider a device with a minimum width of 700px and a maximum width of 900px. This would fall through the cracks of the above CSS logic and would result in neither <div> being visible. As another example, a device ranging from 500px to 750px would also not be covered.
Can anyone suggest a full-proof approach to avoid the weakness in the referenced answer? CSS based solutions would be preferred here.
What you could use is display none within the media query. Use the different classes assigned to each div such as mobile and desktop then in the media query for desktop set .visiblephone{display:none;} and query for mobile set .visible-desktop{display:none;}
This will ensure that within your specified media query one div will always be hidden, then you just have to get your screen size values =)
if i understand you correctly you are trying to do:
CSS
#media screen and (max-width: 480px) {
.visible-phone{
display: block !important;
}
.visible-desktop{
display: none !important;
}
}
#media screen and (min-width: 480px) {
.visible-phone{
display: none !important;
}
.visible-desktop{
display: block !important;
}
}
Use Media Queries
/* If the screen size is 600px wide or less, hide the element */
#media only screen and (max-width: 600px) {
div.example {
display: none;
}
}