WebsiteBaker Support (2.10.x) > Modules

MiniHero responsive desgin

(1/3) > >>

Legaziofunk:
I want MiniHero (MH) to change it's appearance on smaller screens in the following ways:

For tablets and similar (screen min width: 1024 px)

I want the parallax-effect to still be active.
(This seems to have been solved with iPad-OS (sic!) for Apple devices, since it responds similar like a laptop now.
But I am not sure about Android devices...)

For real small screens (screen max width: 500 px)

I want
* the parallax-effect to still be active.

* the hight of the image to adjust (become smaller) (at best proportionally)
I thought, it might work with a relative unit of hight (VH) in MH on WB - but the image keeps its size... :-(

And the frontend.css uses this code, that does not give me a clue what to put there, though I believe the value "cover" should be altered...:


--- Code: ---.minihero {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
overflow: hidden;
}
--- End code ---

Thanx for help...

hgs:
Hast du mal einen Link für uns?
Damit können wir es einfacher nachvollziehen.
Sollte es so aussehen
https://gyazo.com/9c888887f654e6558b3680a1a39e867a

DeepL:
You got a link for us?
It'll make it easier for us to follow.
If it looks like this...
https://gyazo.com/9c888887f654e6558b3680a1a39e867a

The CSS statement looks like this

--- Code: ---.parallax {
    background-image: url("../img/parallax.jpg");
    background-image: url("../img/EN_parallax.jpg");
    max-height: 40vw;
    background-attachment: fixed;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
    height: 30vw;
--- End code ---

Legaziofunk:

--- Quote from: hgs on January 03, 2020, 09:20:31 AM ---Hast du mal einen Link für uns?

--- End quote ---
Sure: http://www.christianemeusel.de


--- Quote ---If it looks like this...
https://gyazo.com/9c888887f654e6558b3680a1a39e867a

--- End quote ---

Well, pretty much - only from big to small ;-)



--- Quote ---The CSS statement looks like this

--- Code: ---.parallax {
    background-image: url("../img/parallax.jpg");
    background-image: url("../img/EN_parallax.jpg");
    max-height: 40vw;
    background-attachment: fixed;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
    height: 30vw;
--- End code ---

--- End quote ---

The "problem" here is, that MH-code looks like this: your code looks quite different to what MH uses... hence, I am no so sure what to apply...

Also, as seen on the page http://www.christianemeusel.de I am using many MHs on one page.

This raises the question what happens, if some MH-banners do not have the same size?

hgs:
Dann hoff ich mal, dass die css-Spezalisten dir weiter helfen können.

DeepL:
Then I hope that the css-specialists can help you further.

Legaziofunk:
Ooops, the MH image do resize when the height of the window is altered (by dragging the edges of the browser window... ;-))

I thought, it would also resize according to the width of the container box...

Navigation

[0] Message Index

[#] Next page