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.
Related
Please help with these two issues, I will happily pay$ to get these two obstacles out of my way. I got this template from envato and my skills are very slow progressing.
http://philpadilla.com/demo/project.html
Fashion Models
Mobile ยท Web
How do I edit the css to expand the image heights to 100%? My graphics will be stacked just like the template but they will vary in height and I need them to not have the tops and bottoms of the images clipped off. I have been digging and cant seem to find the solution. I also want to turn the rollovers off on all the project images. Does anyone have it in their heart to help please?
The images on your template are already with a predefined value, to change that, you can:
Edit the inline style of your image
Create a external stylesheet to change the height
You can try setting height to 100% (height:100%;)
The easiest way to turn the rollover of, is creating a new stylesheet (style.css) and including it on your code (<link rel="stylesheet" href="style.css">)
thumb-overlay { display: none; } /* This code will disable the rollovers */ }
img { height: 100%; } /* And this one will set all pictures height to 100% */
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;
}
Is there a way to show more than 1 panel at a time with the coda slider? I want to keep its original scrolling logic the same. The only difference, to show more than one panel at a time. Such as 2 or 3 or 4 panels in view.
How would we go about doing that?
Thanks
Here is a sample that heads in the direction of a working example of what you'd like. I'll explain why it seems to be more trouble than it's worth (Assuming you want flexible content in both panels) and tell you how I did it.
Here is the jsFiddle.
So, the initial issue is that the current slide is taken into account for height. Well, what if the next slide contains more content and requires a higher slider height? I suppose you'd need to compare the height of both for each height calculation. That's not so difficult, but it may lead you to more trouble if you had to fight with Niall's code.
The second issue is that you have to set a static width for two elements, which is normal in most cases for this slider, but potentially a drag depending on what your content is.
Anyhow:
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 230px }
.coda-slider { float: left; overflow: hidden; position: relative; width: 460px !important }
You should be able to locate these selectors using find in your editor. The !important is a drag, but required if you don't want to rework much code. Basically, you want to set .coda-slider .panel to the width you want each panel, then double the width of .coda-slider.
Let me know if I've missed anything here or failed to explain something properly. I'd be happy to go over this more! I've worked with this slider a lot due to inheriting a project at work that made extremely heavy use of it. I've since moved on to something custom.