Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2024-12-20 08:56:58

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,101
Website GitHub Mastodon Twitter

[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

#2 2024-12-20 09:37:11

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,249
Website

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

#3 2024-12-20 09:40:36

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,754
Website

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

#4 2024-12-20 11:59:32

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,643
GitHub Twitter

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

#5 2024-12-20 15:57:32

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,101
Website GitHub Mastodon Twitter

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

#6 2024-12-20 16:57:53

giz
Member
From: New Zealand
Registered: 2004-07-26
Posts: 306
Website GitHub Twitter

Re: [SOLVED] css: adjust positioning

Hi Yiannis.

Earlier suggestions are spot on; apply the aspect ratio to .slideshow.
Note: leave .slideshow img unstyled.

Offline

#7 2024-12-21 05:38:48

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,101
Website GitHub Mastodon Twitter

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

Board footer

Powered by FluxBB