joomla 4 cassiopeia fluid edge to edge content Topic is solved

[maz007]

Hi
I am using joomla 4 rc3 with standard Casspiopeia template set to full width fluid layout.

I am also creating a content item page where I need images and some grey backgrounds for example to go egde to edge. I can put divs with container class to centralise text and layout I need, but things like a wide image or a background colur needs to be edge to edge.

There is always a gutter to the right and left. How can I remove this?

The only place we can get 'edge to edge' are modules in the 'banner' in position. In the 'component area of the template (where the article is) I can't get edge to edge. There are gutters of about 20mm left and right.

I tried duplicating the template (and it's index.php) and tried replacing the class "grid-child container-component"

Code: Select all

<div class="grid-child container-component">
		<jdoc:include type="modules" name="breadcrumbs" style="none" />
		<jdoc:include type="modules" name="main-top" style="card" />
		<jdoc:include type="message" />
		<main>
		<jdoc:include type="component" />
		</main>
		<jdoc:include type="modules" name="main-bottom" style="card" />
	</div>

with

Code: Select all

<div class="full-width"><!--replaced here -->
		<jdoc:include type="modules" name="breadcrumbs" style="none" />
		<jdoc:include type="modules" name="main-top" style="card" />
		<jdoc:include type="message" />
		<main>
		<jdoc:include type="component" />
		</main>
		<jdoc:include type="modules" name="main-bottom" style="card" />
	</div>

I still get a gutter...but this time only on the right, and its about 15mm PLUS its on the whole page even to the side of the top menu area as well.

I also tried adding p-0 (bootstrap 5 for no gutters) without success. What other class can i add to get edge to edge layout and no left and right gutters, when using a fluid layout... or is there some CSS I can add to remove these gutter spaces? Just need a simple solution. Advice would be really appreciated.

[Pavel-ww]

Hi. Cassiopea is built using CSS Grid. Therefore, you need to explore this CSS technology and use the properties of the CSS Grid module.
You do not need to override index.php. Only a simple line of CSS code solves the problem. Try this code

Code: Select all

.grid-child.container-component {
	grid-column: full-start/full-end !important;
}

Or this

Code: Select all

.grid-child.container-component {
	grid-column: 1/7 !important;
}

If you need to use it only on separate pages, but not on the whole site. Add your class in the menu item settings and use it for an isolated code.

Code: Select all

.my-page-class .grid-child.container-component {
	grid-column: full-start/full-end !important;
}

[maz007]

Thank you so much.
I put that into user.css rather than duplicting the template and it worked perfectly.
Thank you again

[Pavel-ww]

You are wellcome

[maz007]

sorry about this... I can't get the css to work for 'seperate pages'.
I put this in user.css

Code: Select all

.my-page-class .grid-child.container-component {
	grid-column: full-start/full-end !important;
}

and used my-page-class in the menu item Link Class.

(it works perfectly for the 'entire site' as the first code you sent. But would be nice if I could get it working for just the home page link.)

[xplosion]

and used my-page-class in the menu item Link Class.

Try to use "Page Class" instead

[Pavel-ww]

and used my-page-class in the menu item Link Class.

Hi.
That is not the right place for the page class.
The page class must be placed here.

1.jpg

And additional advice. If you want to use it only on separate pages, no need to switch to Fluid Layout. This code will work with Static Layout as well.

[maz007]

Worked perfectly. Thank you again!