Overlapping Of Sections In Qubic Template, How To do That? - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Overlapping Of Sections In Qubic Template, How To do That?

E

Ernst

Template 2 years ago

Hello

The question is about a OnePage website based on Qubic template.

I want a section in the page to overlap the section before it.

Tried it with negative margins but without success.

Scenario is this, that I have a Joomla module in a section (Random Image) and want to display a text above the image (so above the section).

I am interested if such an overlapping is possible in principle and if so, how it is done. It does not necessarily have to be limited to the above scenario.

Thanks for any support.

Regards Ernst

0
2 Answers
Order by
Oldest Newest Votes
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 years ago #114773

Hi there!

Thanks for reaching out to us.

I'm really sorry to say that I could not understand the query. Would you please explain it with screenshots/screencast to understand it better?

However, if you mean scrolling offset vaule, then ufortunately, there is no default option to set offset value in this case.

But, you may try the following code in your custom CSS:

html {
scroll-padding: 75px; /*or whatever*/
}

Hope this helps!

Note: Path towards custom CSS(Joomla 4): System>Site Templates Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

https://prnt.sc/5mBuSRh907N3

https://prnt.sc/ooiq-lkMEXr_

https://prnt.sc/nunlX-f5AhK1

Best Regards

0
E
Ernst
Accepted Answer
2 years ago #114831

Dear Rashida

Thank you for your great documented answer.

I am sorry if I formulated my request in an incomprehensible way.

I will be happy to show you what I meant.

In SPPB, you put a page together with successive rows. Now I wanted to be able to move a row up so that it partially overlaps the previous row.

Here is an example in a pure HTML/CSS document, so not in SPPB, but I think SPPB assembles its pages/documents similarly:

Screenshot 1: Two rows below each other: https://prnt.sc/0zOOp1zmGE6o

Related HTML:

<html>
<head>
  <title>Untitled</title>

  <style type="text/css">

  .first {
      background-color: orange;
      height: 100px;
      margin-top: 100px;
  }

  .second {
      background-color: red;
      height: 100px;
      margin: 0 15%;
  }

  </style>

</head>
<body>

<div class="first">
</div>

<div class="second">
</div>

</body>
</html>

Screenshot 2: Bottom row is slightly above the top row, this is achieved by a negative margin: https://prnt.sc/U-ERLUZ-HWa5

Related HTML:

<html>
<head>
  <title>Untitled</title>

  <style type="text/css">

  .first {
      background-color: orange;
      height: 100px;
      margin-top: 100px;
  }

  .second {
      background-color: red;
      height: 100px;
      margin: 0 15%;
      margin-top: -15px; 
  }

  </style>

</head>
<body>

<div class="first">
</div>

<div class="second">
</div>

</body>
</html>

But I will leave it at that and not bother you with it any further. I think it is not possible in the custom CSS of SPPB to define a negative top margin for a section (row), because I tried it without success.

That's why I'm looking for another solution by myself (at the moment).

You are welcome to close this support request.

Many greetings Ernst

0