The theme I am using has a "custom modified Nivo Slider for Featured posts." It was functioning perfectly until this afternoon when I noticed the effects are lingering on the photos with vertical lines running down them. I can't determine what set this off. I only added a few pages to the nav menu. I didn't install any plugins, touch the styling or functionality of the site at all.
Curious if anyone has seen this before and could lend a hand. I am happy to Paste Bin any of the code that you would need to see. Here is the link to the site: http://mefo1.ecin1prod1lnx1.com/
Best regards,
Alex
The width of the image must be able to be divided by the number of slices without leaving any fractions. ie a 672 pixel wide image can be divided into 14 slices (of exactly 48 pixels each), but not by 15 slices (of 44.8pixels each). Worked perfectly for me.
I found the solution here: https://github.com/gilbitron/Nivo-Slider/issues/114
Also be sure that your images conform to the pixel width of the slider images in the css. I downloaded a theme with css set to:
#slider {
width:672px;
height:374px !important;
but the images that came with the template were of varying widths eg 670px and 674px as well as varying heights. So I had to readjust them all to the 672x374px.
If you do both this and the slice calculation above, you should have no problems.
Related
Hi I have an odd problem with woocommerce product images sometimes omitting the width and height declaration as you can see on https://www.tidybedrooms.co.uk/product-category/hinged-door-wardrobes/.
Looking at the top row of images on that page you will see that the 1st, 2nd and 4th images are displayed mush larger than the 3rd and 5th. The images i have uploaded to WP are all the same dimensions, and the only distinction i can make when viewing source of the correct vs oversized images is that the oversized images omit a tage for width and height, where the correct images do not.
Has anyone experienced this issue, or know how i can resolve it.
Thanks!
It appears that for some reason, the larger images are being displayed as base64 data instead of URLs by default. It is interesting that occurred. Perhaps you can work out why by retracing the steps you used to insert the images for these products vs the others.
As for a quick fix, you can add the following to the theme's custom stylesheet:
.attachment-shop_single {
max-width: 100%;
}
I'm using Bootstrap 2.3.0 on the following website: www.agrium.com/AgTracker
The problem I am having is that when the browser window is resized or when a user is using a tablet/phone, the two logos at the very top of the page are not displaying as I would like.
Below I am showing this behaviour using Chrome on my desktop.
Situation #1: full screen display, logos are spread out and full size. I'm happy with this.
Situation #2: screen size is decreased, but logos are still full size. I would like for either the logos to stay on the same line and for the logos to scale (shrink).
Situation #3: this would likely be solved by whatever fixes situation #2, but I just wanted to show that if I shrink the browser width further, the Agrium logo has scaled (yay!) but the AgTracker logo has not (boooo).
Any help with updating the CSS or way I am using Bootstrap that allows for the logos to both scale and remain on the same line would be appreciated.
There are a couple of ways to solve this problem:
At first, you should recognize that the first two images are actually not two but just a single image. Using this technique, you can make a single png or jpg file with all these three images in combined into a single image file. I would not recommend this, so I would like to propose a much more robust solution using CSS. Please look at my second point.
You can use CSS3's in built feature known as CSS3 Media Queries.
This technology allows you to create responsive websites and be able
to dictate how your content appears on a variety of devices like
mobile, tabs or desktops.
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.
I've been trying the CSS photo gallery example here to set up my own (here is the code). Everything works fine except:
(1) The divs are setup using absolute measures in px. I find it frustrating to have to resize and adapt my photos to fit them. Instead, is there a way to setup up all the dimensions of the gallery (via the CSS), such as in % or em, so that the gallery adapts to the images I put in it, and also dynamically fit the viewport size of a browser?
(2) I tried to add my own photos to the gallery, yet if my photos' dimensions don't match that of the divs, they overflow. Is there a way to specify larger images to change their sizes to fill their containers, and maintain their aspect ratio?
Thanks.
(1) I would not set up the entire gallery in % or scale it dynamically to fit the browser. This can lead to unexpected results and problems. To fit the images into the divs you could set up a bash script with imagemagick to resize all your images. (May even your server can do this for you. If you are on Windows there are programs to batch-resize images like Shrink-O-Matic.)
(2) You can just set up a fixed hight or width (only one of them) to put the image in a fixed dimension. The browser will then scale the image to fit that value proportionally. The CSS would look like this:
#container .pics span img {height: 400px;}
That should work.
If you really want a gallery that "scales" to the browser size, may you have to look around for another one. There are thousands out there and it would be to much work to modify this one to your needs.
Good luck.
I have redesigned only the Home page using the DIV tags from Traditonal HTML tables,
http://www.cricandcric.com
After that my page looks scattering across the screen, if the screen resolution increases.
for the lower screen resolution its looking good, IE and Mozilla compatible
I am not able to make out the mistake which is done, can any one help me check this out.
Can any one share the resources if they on how to make the website which is developed using either HTML or IE more compatible with all VERSIONs of IE and Firefox, with all the different resolutions format, it should work fine,
if any one has any good article share the link to me.
thanks in advance
your "middle1" section has a width defined as 1004px so should be almost the same size as the navigation, however the contents two tables and a div are positioned such that they dont float (certainly I cant see any floating in your CSS).
You're also using tables for layouts - i think thats the crux of the problem. Looks like you are trying to make a three column layout using CSS - have a look at this example: http://ago.tanfa.co.uk/css/layouts/css-3-column-layout-v1.html
I had similar problems for my website and it turned out that fixed width for div elements changed the rendering of the page depending on monitor resolution or screen size. I fixed the problem by using relative width by % instead of px for divs. It was a css issue.