i am working on my website: http://www.antologiaoliveoil.com/ES/index.html
All looking good, however, when I preview this on Iphone, the image called Lataorganica.jpg does not display well on the first time it shows up on vertically, and the slider does not work. Once I rotate the iPhone horizontally, and then back vertically it works fine.
any idea anyone?
Many thanks
Part of the problem you have is that your text is in your image. On an iPhone or other mobile device where the width is very small, all the text is squish into the image because the image is squish into the mobile width.
One way to fix that is to create separate mobile slider image where there is less text and it is easier to read on a mobile. You can use CSS Media Queries to trigger the mobile slider to show if the width is small.
As for your question about the slider, are you using Owl Carousel (http://www.owlcarousel.owlgraphic.com/)? If you are, include the code you are using so we know how to troubleshoot.
Thanks!
He is using owl carousel. I see you are also using bootstrap. Is there a reason you are not using the bootstrap carousel? See here for reference
You have the required files to use the linked solution.
Related
I have been asked to work on the following website by my boss: 2tec.club
The site has been built using Wordpress which I am not an expert in, I have access to only the admin dashboard.
The slider at the top has a strange bug, as you can see, every time the slide changes onto the next slide ,that particular slide for a brief second changes its height. This causes the content to be pushed down briefly which is extremely annoying for the visitors.
NOTE: this only happens on larger devices. It seems fine on my phone.
I have tried using the Chrome developer tools to change the CSS rules with no luck. I cannot for the life of me figure this one out. Can someone please be kind enough to offer their help. If so it would be much appreciated.
If you remove the slide class from your #myCarousel the problem goes away.
There's a number of other issues however. It seems as though you are including bootstrap twice, once for version 3.3.2 and once for version 3.3.6.
You also mention that you're using bootstrap carousel, but you have a carousel.js that appears to be owl-carousel.
So if you're using bootstrap carousel, and you also have owl-carousel - there is the potential for unknown conflicts.
You should review all the files you're including when you get the chance.
your theme is uploading the style.css before bootstrap.css... so its not able to overwrite the changes to bootstrap..
if you r not familiar with coding the easiest solution would be to use bigger images. at this moment your image size is 960 X 295... change it to 1200 X 368.. point is increase the width of the image...
let me know if it works
Greetings!
I am using wordpress Blog site http://www.seoindiarank.com . I am facing a problem with it into slider. The slider was showing full size but now it's not showing full height, Even I try other sliders too but all slider are showing same width and height.
I want to show slider as 2000px by 550px. But it's need to be mobile friendly too.
I hope friends will help me in my great problem.
Regards,
Sam
I would recommend using viewport or % width to make it mobile friendly. In terms of displaying the correct height, viewport and % heights do a much better job with finished aesthetics.
I am making small jquery app. In it i am using DataTables to show some information on a grid. I am having a slight issue with its display on iphone. When i display grid on my chrome or android device it is fine as you can see here i have created JSFIDDLE but on iphone some of it is getting cut off. i keep messing around with css but not able to get a good looking grid. i basically wana reduce the width a little bit so i can fit it on iphone too.Can someone pelase advice.
Here is an example of what is throwing me off
I tried the following
#example_wrapper{
width: 50px;
}
Just as an expirement to see what changes occur and i saw that the width of table got smaller in chrome but in iphone there were no changes.
This is how it looks like on iphone.[i am using iphone simulator for this but i have actual iphone too]
So if someone can please guide me it would be great.I apologize if this is a bad question as my css knowledge is limited.
I have managed to solve this, not sure if the best way but it does what i need so its good. I basically put the table in a div which has a data role equal to content and then i used the zoom in css for that div to zoom out .
<div data-role = "content" id="tbcontent">
//insert table in here
</div>
#tbcontent{
zoom:80%;
}
Here is updated JSFIDDLE.
I was looking at flickr and noticed their carousel at the top and how smoothly it operated. Upon inspecting it, it shows "yui" but I don't see it anywhere in the YUI list of items.
http://www.flickr.com/#yui_3_5_1_3_1354482071640_111
Does anyone know what elements specifically from YUI the carousel is made from, and where they're available?
Thank you for any assistance.
The following are conclusions I'm reaching based on what I can tell from the HTML and minified JS source.
The Flickr carousel is written with very little YUI code and without using any complex component besides the transition module. Transition is used to provide a fallback for animations in older browsers. It's very smooth because it's using CSS transitions, in particular using translate3d() which works really well for moving images in one direction.
Like Quinn mentions, there's the Gallery Carousel widget. Lately I'm using ScrollView + ScrollViewPaginator and disabling drag events in non-touch devices. I like this approach because it feels like the typical carousel, but it also supports flicking through the images/pages with gestures on touch devices.
you can build it very easily using the YUI Gallery Carousel YUI Gallery Carousel
galleria javascript crops top and base of images when viewing in Firefox Chrome and IE
However in Safari this issue does not exist.
Please see the issue here
http://galleria.aino.se/media/galleria/src/themes/fullscreen/fullscreen-demo.html
no compare the squirrel image with its original
right click on any image and you will see how the script is not displaying the the full image.
We are using galleria. js full screen for a wordpress theme and all our images are the same size so there is no height issue the images we will use are 1600x900
If any one can help please advise. We need to display the entire image.
Thanks all.
I believe that's how galleria is supposed to behave. In full screen mode it fills the screen, so it will crop the top or sides, whichever extends beyond the aspect ratio of the browser window.
In full-screen mode, if you have a wide browser window, it'll crop the top/bottom. If you resize the browser window to portrait orientation, it'll crop the left/right.
You can control this behavior using the image_crop option.
F.ex if you want the image to always fit, set this to false.
Try to set in your css:
.galleria-image img {max-width:6000px !important;}
this works for me, I think there is some trouble in Safari with the attribute max-width of the image. You could use this simple trick or improve this technique adding some conditional css, so for example setting max-width to a specific value only when option "imageCrop" of galleria is set to true. Let me know if this works also for you!