on the home page the slides are visible but till the width of the screen is reduced to around mobile size at which point the slides disappear.
I tired everything I could think of played with .flexslider .slides img ...
currently i have it set as .flexslider .slides img {width: auto; height: auto;display: block; max-width: 100%;margin-left:auto;margin-right:auto;}
thanx in advance
issue resolved i had another code which was intercepting this ...changing that solved the issue
Related
As you can see from the image, the iframe content is too big and it hides the X button + Sources bar.
Is there any option to make it's content a bit smaller?
This css seems to be the problem:
##media only screen and (min-width: 767px) {
#uw-glamor-396 .css-5anb0a, #uw-glamor-396 [data-css-5anb0a] {
position: absolute;
top: 50%;
left: 50%;
width: 767px;
height: 610px;
transform: translate(-50%, -50%);
border-radius: 5px;
}
}
If the height would be 450px instead of 610px it would fix the issue.
This fiddle raises the issue, open it with your laptop and expand a little bit the result window to get the Drag and Drop box.
This is how it looks like without the bookmark tab in my laptop with 100%, I use Chrome:
Unfortunately, it isnt possible to change this currently. Its a known issue but up until now there havent been any complaints that i know of. Typically apps that host the widget are in desktop resolutions so there's enough vertical space or its in mobile res and then the widget switches to the mobile layout.
Ill look into promoting this issue internally.
In the meantime, can you share some details about your app, how does it display the widget? What makes it not have enough vertical space?
Im trying to set a vertical carousel with AnythingSlider. But, I need to set a fix width for UL, and the script dont allow this. Is that possible?
Here is my code: http://jsfiddle.net/ycUB6/5230/
But the list stay with a blank space ;/
Anyone could help me?
AnythingSlider isn't, at this time, set up to allow multiple vertical slides. So, you will see some blank space below the last slide until it reaches the top.
To fix your demo, change this bit of css (updated demo):
ul#slider img {
width: 300px;
height: 100px;
list-style: none;
}
Working URL:
http://webstage.co/scroll/stack.html
What I am trying to accomplish is to hide the content when it is outside of the background area (1280x800). I like the way the backgrounds are coming in when you scroll to a new section, but I want to hide the content until it gets into that 1280x800 viewport? Any suggestions on how I can accomplish this?
Bonus...It would be great if I could also hide the content under the top navigation once it scrolled up under it as well. A guy can dream. :)
Thanks!
For the first part you can add another div and target with css something like this:
.viewport {
width: 1280px;
height: 100%;
position: fixed;
top: 0;
left: 50%;
margin-left: -640px;
background: black;
clip: rect(800px, 1280px, auto, auto);
}
Basically, set the background to the same color as the page background and use clip to only display the portion of the div that sits below your desired viewport area hiding the content outside the viewport area.
If you add content to the footer later you may need to tweak some z-index settings to make sure it sits on top of the viewport div.
I was trying to add twitter/facebook icon to the site footer, much like side.cr footer. I got everything working, except that safari having unexpected vertical tile for twitter and facebook. I tried to upload screenshot but I am new user, so can't do that right now.
So I was searching for the answer and found this q/a here, Is <img> element block level or inline level?
So I went to side.cr again to see its css does have user agent stylesheet.
I added this line of code to my css:
.footer ul li img.t, li img.f {
width: 40px;
vertical-align: middle;
display: inline-block;
}
and it fixed the problem.
But I have a few questions in head:
why does side.cr's css show as non-editable user agent, while I have to add that display-inline to my css?
How does "display: inline-block" fix the problem?
Notice that: When mouse over to the gray twitter, it triggers swap.js, changing the icon image to the colored one, but in safari, the highlighted icon is bigger than the gray one. I think i almost know the answer. Just need someone who knows all the kinks behind this.
Thanks!
Solution:
To fix this problem make sure you set the height and width on the image so that it doesn't change during loading.
<img src="http://www.side.cr/images/contact/twitter_off.svg"
class="twitter_bird img_swap" height="52px" width="52px" />
or
.twitter_bird {
height:50px;
width:50px
}
Explanation:
When you switch the images name, safari begins to load the image but it doesn't know the height or width until it's done downloading. If you set the height and width it will not grow from 0px to 52px.
I'm building a Magento shop for a client, I uploaded some test images for the products but they seem to have a black background whenever I mouse over using chrome. Does anyone understand why? I don't see any problems with css so it has to be the images themselves.
URL: (I'm talking about those images below 'New products' and 'featured')
http://bit.ly/zuRH2O
I made those using photoshop and the png-24 save-for-web option (http://bit.ly/zGXTAo). Been doing that for years and this is actually the first time happening.
The problem is in your css. Look at the background image:
a.product-image {
margin-bottom: 10px;
width: 182px;
height: 239px;
border: 1px solid #2F3238;
background: url("/images/thumb_bg.png") 50% top no-repeat;
display: block;
border-image: initial;
If you right click on the images, and view in new tab you will see that they are transparent. Your background is dark, so the image picks that up.