How do I go about configuring orbit so that the images fill out the whole viewing area?
At the moment i have a gallery with two images. These images are not as wide as the viewing area of the orbit slider and it looks kind of dull presenting them like this.
Is there a way to configure orbit so the whole viewing area is filled?
Look at this picture. In the top is how the orbit image is being rendered and in the botton is how i would like it to be rendered instead. Is there any way to do this or do i need to crop and resize all images myself?
Can you show the code you are using? Also, what size are the images that you are using? When I've done this, I typically have cropped the images larger than the area I want them to cover. On one site that I'm working on, I have them cropped at 1600x500.
Here is what that site is using right now:
<div class="row">
<div class="large-12 large-centered columns">
<div class="slideshow-wrapper">
<span class="preloader"></span>
<ul id="featured1" data-orbit data-options="pause_on_hover:false; timer_speed:5500;">
<li><img src="/assets/sliders/slider01.jpg" /> <div class="orbit-caption">...</div></li>
<li><img src="/assets/sliders/slider02.jpg" /> <div class="orbit-caption">...</div></li>
<li><img src="/assets/sliders/slider03.jpg" /> <div class="orbit-caption">...</div></li>
</ul>
</div>
</div>
</div>
The additional class="slideshow-wrapper" is in there so I can further customize the text, etc.
Related
im trying to creat a css grid layout with multiple images using tailwind but im stuck because when i'm trying to span the rows it doesn't work, basicly i want the images to go down to the row-4 but theye stay at row-2
this is my reference: this is the layout im trying to do
this is my result: enter image description here
my code:
<div class="container grid grid-cols-4 grid-rows-4 gap-4 p-4">
<img src="/img/h1.jpg" class="col-span-2" alt="">
<img src="/img/v1.jpg" class="row-span-4 " alt="">
<img src="/img/v2.jpg" class="row-span-4" alt="">
<img src="/img/h2.jpg" class="col-span-2"alt="">
</div>
There are two things I think you need to change.
The first is the size of the grid: the grid in your example does not have 4 rows, but only two. You need to change the row and col span accordingly.
The second is the use of images in the grid. If you use images, it seems they need to have the exact correct aspect ratio for the grid, otherwise they will not align. Therefore I suggest you use divs.
You can see a working example here. I also included the not correct working version with images in it.
Simplified version of the code:
<div class="w-5/6 h-64 grid grid-cols-4 grid-rows-2 gap-4">
<div class="col-span-2 row-span-1 rounded-lg bg-cover bg-[url(...)]">1</div>
<div class="row-span-2 rounded-lg bg-cover bg-[url(...)]">2</div>
<div class="row-span-2 rounded-lg bg-cover bg-[url(...)]">3</div>
<div class="col-span-2 row-span-1 rounded-lg bg-cover bg-[url(...)]">4</div>
</div>
I'm trying to make 3 columns in a row equal height. I used row-equal-height, but nothing happens.
Here is my code:
<div class="row row-eq-height">
<div class="col-lg-4 content-block">
<img src="../wp-content/themes/understrap-child/img/Assisted-Living.jpeg" />
<div>
<h2>Assisted Living</h2>
<img class="icon" src="../wp-content/themes/understrap-child/img/icons/assisted-living.png" />
Bridging the gap between seniors needing some help and being unable to care for themselves is the purpose of assisted living facilities...
...
</div>
</div>
<div class="col-lg-4 content-block">
<img src="../wp-content/themes/understrap-child/img/Memory-Care.jpeg" />
<div>
<h2>Memory Care</h2>
<img class="icon" src="../wp-content/themes/understrap-child/img/icons/memory-care.png" />
Enhancing the life of seniors with memory impairment (due to Alzheimer’s, dementia, or aging) is to specifically enhance the dignity and well-being of each resident...
</div>
</div>
<div class="col-lg-4 content-block">
<img src="../wp-content/themes/understrap-child/img/Independent-Living.jpeg" />
<div>
<h2>Independent Living</h2>
<img class="icon" src="../wp-content/themes/understrap-child/img/icons/independent-living.png" />
Engaging in a fulfilling lifestyle is so much more than where you live...
</div>
</div>
Here's the website in progress: https://ciminocarestg.wpengine.com/
It's the column of 3 under the hero (Assisted Living, Memory Care, and Independent Living) that I want to make equal height.
Thank you!
Thanks for sharing the visuals.
Your row-eq-height is working, but is just so happens that your content, within each column, is inside a nested child div element that is not impacted by row-eq-height.
For a quick and easy way to solve the issue, especially if your content is finalized, then add this CSS rule to your site...
.home .content-block div {
min-height:425px;
}
In the future, do either of the following:
If the content in any of your 3 columns expands, just simply adjust that min-height value.
If you don't want to depend on this technique, then pull out the nested divs that are in each column, so that the content is only 1 level deep, not 2.
In either case, UnderStrap is still an excellent choice for a theme and utilizing BootStrap.
For the longest time, the Foundation Sticky plugin was working as expected, sticking as the page scroll met the top of the sidebar. Now, suddenly, it's broken:
https://www.arcresources.com/about-arc/board-of-directors/member-bios
It jumps once, and the classes are changed, indicating the plugin is firing and adding the top margin, but after that, nothing.
I've tried commenting out all other JS, and relevant CSS to see if something was interfering, but the same problem persists.
Adding width: 100% and position: fixed to the data-sticky div produces the right results, but this is the code the Sticky plugin should be adding and removing based on my top and bottom anchors.
Sidebar code:
<div class="grid-container sidebar-nav-wrapper {{ firstSegment }}">
<div class="grid-x grid-margin-x">
<nav data-sticky-container class="show-for-large large-3 large-offset-9 cell sidebar-nav">
<div data-sticky data-top-anchor="main" data-btm-anchor="main:bottom" data-sticky-on="large" data-margin-top="6">
<!-- Sidebar content -->
</div>
</nav>
</div>
</div>
I'm setting up a new project with Zurb foundation. I have a problem in that I want a couple of css classes to have different font-sizes to the rest of the site but doing that makes the row reduce it's width.
So
.boxed {
font-size:0.8em; // or font-size:12px causes the same issue
}
<div class='row'>
<div class='large-12 columns'>
stuff goes here
</div>
</div>
<div class='row'>
<div class='row boxed'>
More stuff here, smaller font-size
</div>
</div>
The second row is a lot narrower than the first just because I've applied the .boxed class to it.
Any ideas on best practice for this in zurb foundation?
Many thanks
I'm currently using Cycle2 with scrollHorz on full screen (100% width and height) with background images with their size to 'cover', besides that there are no callbacks or much else on the page so its a very basic slider.
I find that when the browser is too big, the slide transition appears jagged, not smooth. However its somewhat better when the screen is smaller. I also do not experience any issues with 'fade', or at least its not noticeable at all.
I have tried with various combination of easing and speed, but haven't had much luck.
I'm not sure if its a css thing or a cycle2 thing, and I'm unable to find a similar issue via google, can someone please shed some light to this?
HTML
<ul id="homepage-carousel" class="hero">
<li class="homepage-carousel-item" style="background-image: url('hero1.jpg');">
<div class="homepage-carousel-info">
<h1 class="homepage-carousel-title">Title</h1>
<h2 class="homepage-carousel-subtitle">Subtitle</h2>
<div class="homepage-carousel-desc">
<p>some info here</p>
</div>
<div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div>
</div>
</li>
<li class="homepage-carousel-item" style="background-image: url('hero2.jpg');">
<div class="homepage-carousel-info">
<h1 class="homepage-carousel-title">Title</h1>
<h2 class="homepage-carousel-subtitle">Subtitle</h2>
<div class="homepage-carousel-desc">
<p>some info here</p>
</div>
<div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div>
</div>
</li>
<li class="homepage-carousel-item" style="background-image: url('hero3.jpg');">
<div class="homepage-carousel-info">
<h1 class="homepage-carousel-title">Title</h1>
<h2 class="homepage-carousel-subtitle">Subtitle</h2>
<div class="homepage-carousel-desc">
<p>some info here</p>
</div>
<div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div>
</div>
</li>
</ul>
CSS
#homepage-carousel {
width: 100%;
height: 100%;
.homepage-carousel-item {
height: 100%;
background-repeat: none;
background-position: top center;
background-size: cover;
}
}
This isn't a cycle issue
background-size: cover just has horrible performance.
You can ease the pain some by adding transform: translate3d(0,0,0) to the slides as well, but it will still be choppy.
Replacing the background with an actual image normally increases the performance for me, like this fiddle. Though, the larger the image is the slower the performance will be in any browser; rendering large moving images is hard for them.
Then it's just a matter of sizing and positioning the images, for that you could use something like:
.homepage-carousel-item > img, .homepage-carousel-info { position:absolute; }
.homepage-carousel-item > img {
/*img size*/
min-width:100%;
min-height:100%;
width:auto;
height:auto;
/*img pos*/
top:50%;
left:50%;
transform:translate(-50%,-50%);/*offset position based on img size*/
}
If you need to support legacy browsers, then you would run a routine through the images to size and offset like this does.
There are other solutions that only work in certain browsers (like object-fit: cover), but these options should work in all browsers.