I'm having trouble getting Revolution Slider (version 5.2.5.3) to work properly on my website and I'm looking for some help.
For reference the test page I'm using can be located here: http://www.capidale.co.uk/home-2
The problem I'm having is the background images on each slide are "zoomed" in. All images are 960x350 and I've set the grid settings also for 960x350. However, inspecting the code, the background images appear to being assigned values of 1653x549.
I've racked my brain but I just can't get it to work. I've tried using the images as "layers" and setting the background to transparent. But then I can't get the images to display at all.
Appreciate any help. Thank you.
i have looked at the code and it says the natural values for the
Best best is to resize the images so they are 960x350 this should fix the issue if the image is zoomed still on the styling of the image set max-width:960; and max-height:350;
to save you the trouble use this image and replace the existing img, if it works then this is due to the natural sizes of the image
:D
Related
I've designed and coded an interactive SVG that I've had to implement as HTML in WordPress because it only acts as a useless static image if it's entered as an SVG in an image block.
So far, that means that it's not responsive and loads at full size on a phone. I want people to see it in full, straight away, not zoom out to see it.
Is there another way to make it work without being an HTML dump? And even as code, how would I reduce it to fit screen sizes? Bearing in mind that my brain may implode if you suggest coding breakpoints or something like that.
I'm using a Blocksy child theme with no page builder.
The code itself works fine so there seems no point in me pasting a shortened version of the code. The page is here, if that helps.
Www.orderaround.co.uk
Right, I've fixed it myself. All I needed to do was remove the width and height specifications from the beginning of the svg code. It now fits to whatever container it's being displayed in.
So im building my first wordpress site at the moment. Most problems i come across i just do a google search, read, learn, fix.
But one continuous problem i keep getting is images and resizing them.
Im really lost as to how it works, its so simple, yet i cant seem to manage them at all.
Heres some of my issues:
I'm using customizr theme, it has a slider, featured images for posts-big and small (featured image and thumbnail).
I resize the picture to the recommended dimensions, but it never seems to actually resize the picture in the box. And that's for all of them, the slider, thumbnail and featured image.
I toy with the dimensions to try to learn whats happening, but it just doesn't make sense to me, the box just zooms further into the image, the image doesn't actually move or try to fit at all when the dimensions are changed.
They also share the same image for the featured image and thumbnail, even if i click 'thumbnail only' and change the dimensions, it effects all of the images.
The slider images are always cut off, even if i change to the recommended dimensions. I've given up with the slider after a week of resizing, trying new sliders, adding slider codes into .php, enough.
But now this issue with a simple featured image and thumbnail is the last straw. So here it is, my cry for help!
How can i get control of my images, resize effectively, so i dont get these issues every time i try to add images into various functions.
Any help is much appreciated, thanks.
I have a problem with new images. When I'm uploading a new image it looks like this:
Any suggestions how to fix this ?
I ran into this problem. Every time I added an image into a page, part would be cropped off. I tried playing with the settings > media etc, turned off the Smush plugin, changed the image size and dimensions in photoshop. But part of the image still kept getting trimmed off when uploading. Finally, I uploaded the image directly into Media, where it looked fine. Tried placing it in the page - cut off again. Copied and pasted the image code into the page and it shows up fine. I haven't nailed down the issue, but at least this is a workaround if it is only one or two problematic images.
If your problem is that img is cut at the top or/and at the bottom, you probably have a hard crop in your template.
This might help you
Or, try a work around:
Add a high-quality, max-height image, then you can and scale it up with transform: scale(1.5); in css.
Hope that helps.
If you go to Settings -> Media, you should set width or height to 0. In this way, that dimension will be scaled and nothing is cut off.
If you set width to 0, vertical (height > width) images will be reduced, and horizontal images will be enlarged a bit.
Go to settings > media and you will see your image settings. What is happening is that the image you are uploading is too large and thus it gets cropped. Uncheck Crop thumbnail to exact dimensions (normally thumbnails are proportional), and your images will get scaled rather than cropped.
If this is still no good to you, then you will have to jump into the code that is displaying the images.
I'm working with the Header Image Slider plugin for WordPress (which uses the Nivo Slider) and I can't seem to get the images to the size I need on a smaller screen.
I've looked around plenty and tried various things in my media queries like setting the max-width, but I can't put my finger on what the problem is. Each image is cutting off on the right-hand side. I'd like to get the images to roughly 708x245 on the next step-down. Any advice? Thanks!
My Site
I am having issues getting my Instagram images to display properly. I have tried all types of tricks and changes but cannot get it to look consistent on both desktop and mobile. It looks perfect when at full window size and across all browsers (except mobile), but when I change the size of the browser viewing window it gets all weird.
Here is my issue:
I need all the horizontal Instagram images to be responsive, meaning when I do change the size of the browser window they will adjust to the dimensions that are appropriate to view them properly. I want them to always stay in a row of 5 images across...
Here is a link to the work in progress:
http://www.jaygiroux.com/wordpress/
I have tried modifying the instapress.css to the best of my abilities but now I'm just stuck. I tried using percentages instead of pixels in some places but it's still not working...
What im reading online is that until version 3 nivo slider is not responsive, so you might want to update the library.
http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/
Also i noticed that you're calling the tag twice (the first one is between the ie class compatibility code) so watch out for that too.