I want to use an animated gif as my featured image in WordPress (div, theme). I read a lot about the problems using animated gifs in WordPress, so I chose "large/full size" for the gif file and it works fine on a 13" screen. But on mobile devices, it doesn't resize to the smaller screen width. It stays at 1278px width and therefore gets cropped out.
How do I make the animated gif for all devices work so it keeps it's animation and still fits within the screen width?
use css:
img{max-width:100% !important;}
hope it will help.
Related
I have a clients website using the Revolution Slider plugin. I'm trying to optimise the page for mobile page speed.
Each slide is just a background image. The problem is that the image is 1920x1080 which is the same image used on mobile screens that are 640px wide or less. This makes the page load a larger file image then is needed.
I've tried removing the background image and including 2 versions of the image to the slide on their own layers. One layer only shows for mobile and the other only for desktop but even though it doesn't display both images it still loads them both. The mobile view shows the smaller image but still loads the larger one without using it.
Wordpress creates small, medium, large and thumbnail versions of images uploaded to the media library. I thought the plugin would use these by default for different screen sizes but I can't see how to set this or do it manually.
Is there a way for me to have the smaller image file display for smaller screens without loading the larger image file? If not is there another slider WordPress plugin that can do this?
I got a very plain photo gallery site. Every page only contains a image (600 x 400) or a image slider. I have problem with the look of my website on smartphone/tablet on landscape mode or even a laptop. Because the bottom of the image/slider will just be chopped off. So you need to scroll down to see the whole image. On my desktop or portait mode on small devices it looks good. I had like the image/slider be showing in a smaller size on those screens so you dont need to scroll down to see the whole image. Can someone help me with this? I built this with a twenty sixteen childtheme in wordpress.
Thanks,
Hazy
I recommend using Slick carousel. that's an easy slider initiator and will save you lots of time and adjustments: http://kenwheeler.github.io/slick/
For single images use the following css properties :
max-width: 100%;
height: auto;
I am working on blog at blogger and it has got a responsive template. When I see logo on my blog on the computer it looks fine but when I go to iPhone it is kind of blurred and I don't know what is the reason for that.
I tried to edit logo and change it for different one but the result is the same...
Link to my blog is: www.5minLunchBox.blogspot.com
Does anyone have an idea how to fix it?
Thank you!
Your natural width is 220px width. But your mobile viewport width exceeds that amount to 320px to 480px depending on the mobile device. Not to mention, you are using a .jpg image which is highly pixelated.
SOLUTIONS
Familiarize yourself with .svg technology. Using an SVG will allow you to manipulate the image at all widths and make use of your max-width:100%;.
Use a larger image (no smaller than 480px) this way, you can still resize down without losing resolution, and not have a need to re-size up, which is your problem here. You are expanding .jpg pixels
Once you have added a larger logo, hopefully a .png at least, but preferably an .svg, do the following:
#media only screen and (-webkit-min-device-pixel-ratio: 1) {
.widget iframe, .widget img {
width:100%;
max-width: 320px;
}
}
This happens because the real logo jpg dimensions are: 200x90 pixels. On the desktop version set the width to 200px but the smartphone version set the width to 100%. For this, on an iPhone 6, the logo width become 375px and the image appears blurred and pixelated (on iPad become 768px).
You could augment the real size of the jpg logo, but the file size could be too big. If you can change the image format you could convert the logo to svg.
I'm trying to create a bootstrap gallery with the thumbnail component. I pulled the code directly from getboostrap.
When viewing the page at full size everything looks fine. However, when I resize the screen to make it smaller the images don't adjust to fit inside of the thumbnail box. What I was hoping to do is have an image that adjusts in size based on how wide the thumbnail box is.
Instead the thumbnail box ends up being substantially wider than the image itself, especially on medium sized screens. The images I'm using for my source images are more than large enough to take up the entire space within the thumbnail.
Any ideas?
Thanks
Is an image displaying in a lightbox script (e.g. prettyPhoto, lightbox, thickbox, etc) affected by high pixel ratio devices?
For example, if I had an 800px wide image up in a lightbox, will it be shown at 800 CSS pixels or 800 actual pixels? To probe further, is an image displayed raw in the browser affected in the same way?
If images displayed with lightboxes are affected by retina screens, what's the solution? Simply link to a larger image? (assuming the script auto resizes images to fit in the viewport)
Perhaps someone needs to develop a new jQuery plugin. :)