Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
[SOLVED] css: adjust positioning
It’s been 8 years since I changed our site to responsive, and feel that it is about time to do another update. I’m not attempting to change the design but to update the code. Namely:
- Lose the dependency on jquery and use dedicated, short js for needed functions
- Lose the div floats in favour of grid.
- Shorten the css
- Light/dark themes
- Minor reorganisation of content on pages
I still have a lot of work to do, but even in this early stage, I have hit a wall regarding the positioning of the slide show which is working just fine on desktops with a min width of 800 pixels but it overlays the content after when the widths are smaller?
Can any css guru point me to a direction to solve this?
I uploaded the first, incomplete, and very messy draft on https://www.neme.org/?f=slides.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: [SOLVED] css: adjust positioning
The images are positioned:absolute
and as such won’t contribute to the height of the parent element(s).
Try:
ul#slides {
aspect-ratio: 71 / 30;
}
(under the assumption that you use the same aspect-ratio for all page/window/device sizes – which I have not checked)
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: [SOLVED] css: adjust positioning
One way would be to apply the aspect-ratio of the slide to the container so that it reserves the space required for the slideshow before the slideshow loads, e.g.
.slideshow {
aspect-ratio: 71 / 30;
grid-column: span 3;
position: relative;
}
(you can make the aspect-ratio a css variable if you want to specify the ratio in one place).
I’m guessing at narrower widths, you’ll also want to set grid-column: span 4;
or alternatively: grid: 1 / -1;
(to span from first to last column) so that the slideshow spans the entire width.
EDIT: philippe was faster ;-)
TXP Builders – finely-crafted code, design and txp
Offline
Re: [SOLVED] css: adjust positioning
.slideshow {
position: relative;
grid-column: span 3;
aspect-ratio: 71 / 30
}
@media only screen and (orientation: portrait), and (any-pointer: coarse) {
.slideshow {grid-column:span 4}
}
Last edited by Pat64 (2024-12-20 12:04:25)
Patrick.
Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.
Offline
Re: [SOLVED] css: adjust positioning
Hi guys, and thanks so much for looking into this and your recommendations. I updated the page but the slideshow is still misbehaving.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: [SOLVED] css: adjust positioning
Hi Yiannis.
Earlier suggestions are spot on; apply the aspect ratio to .slideshow
.
Note: leave .slideshow img
unstyled.
Offline
Re: [SOLVED] css: adjust positioning
that indeed worked but still have many issues to resolve before the site goes live.
Thanks so much to all.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline