Im recently having problems with shopping cart icon. It works everywhere correctly and could be seen at the top at any device, however on android devices the cart icon just disappears (on landscape version It works although). Does anyone have any clue where should I start? I tried somehow through CSS. Funny It works even with iOS devices..
http://nordickliima.ee/
Shopping cart is missing on android device
Landscape version (Android)
Your css add a display: none to the "wrap-cart-count" class for device with width under 360 pixels
#media (max-width: 360px)
#header .wrap-cart-count {
display: none;
}
Related
I am developing one website using Django. The website link is,
http://flooroof.com/listings/
You can see that the tiles on the website has got overlap on each other. This happened after I implemented infinite scroll. I found it at below link,
https://simpleisbetterthancomplex.com/tutorial/2017/03/13/how-to-create-infinite-scroll-with-django.html
If you scroll down you will see more and more properties are getting loaded. At a time I am loading 20 listings. But not sure what has gone wrong.
I know there is something wrong with CSS but I am not sure what it is.
Please guide.
Yes as I can see the CSS has issue especially in .grid-item present on after first .infinite-item. I .grid-item has absolute position and only first .infinite-item's .grid-item has proper left and top values. If you want a quick solution then you can do this.
a.grid-item
{
left: auto !important;
top: auto !important;
position: relative !important;
}
One more issue is with image size. your images size are very different from each other so best solution is to use a blank 1px trasparent image with fixed height and show current images as background image.
I am using Foundation off-canvas and the reveal-for-large class so that the sidebar is always visible to larger screens. In Chrome and Firefox, the sidebar always appears open between page loads, which is great. However, upon each page load in Edge and IE, the sidebar first does not appear (although left margin space has been reserved for it) - and then the sidebar slides in to fill the space.
It is distracting to have this animation on each page load. Is there any way to force the sidebar to stay open in IE? Or disable the animation perhaps?
Change the $offcanvas-transition-length SASS property to 0s.
I am using a picasa slideshow widget on my blogger, I would like to customize it so it's a little bigger and it lines up in the center of the right side. I looked into the HTML code but can't find any code that allows me to change the size. Any suggestions?
its on this blog http://www.sequenceunlimited.com/
If you want to move the slideshow to the left paste the following code into your CSS section. The -20px pushes the slideshow 20px from the right,so change it accordingly.
#Slideshow1 {
margin-left: -20px!important;
}
I'm fairly new to Foundation and I searched for this answer everywhere, but couldn't find it.
Trying to create a page that has a navigation that starts half way of the page. When scrolling the navigation will stick to the top. That's easy and works like a charm..
But when you go onto the page with a smaller screen size I would like the 'mobile' menu to be fixed at top, not just floating around the page.
The div I have around my is:
<div class="contain-to-grid sticky">
Hope someone knows how I can make this work.
Couple of options, you could just use a media query for small screens, something like:
#media only screen and (max-width: 40em) {
.sticky {
position: fixed !important;
top: 0px !important;
}
}
Or you could conditionally only load Magellan (or whichever method you are using) when the screen size is large enough, e.g.
if($(window).width() > 670){
// init sticky nav stuff here
}
I would like to have some kind of navigation for a slider when viewed on a mobile device. Since the directional arrows won't show on mobile (if anyone can tell how to make them, that would be awesome) I thought a good solution would be to have a different slider, same images, that is "show-for-small" and has bullets underneath.
It works, but there is an issue that's killing me. If you load the page with the browser window wide (desktop) and scale to a mobile width the sliders switch, but the bullets aren't centered. They appear shifted to the right. If you reload the page at that mobile width with they are fine, perfectly centered below the image.
Does anyone have any clue on how to fix this? I set up a page to demonstrate the problem. www.jonesco.com/_foundation/bullet_problem.html
Thanks
Add the following to your stylesheet:
.orbit-bullets {
display: table;
text-align: center;
}