-
1. Can you try to remove this line in Ying’s code to test?:
max-height: 542px;2. Remove the
cover-containerclass for that section. -
1 + 2 = Fixed.
Now, the issue is how the whole page looks on smartphone. Would you have any suggestion on how to get a decent result please?
-
Now select the parent container of the book container, switch to mobile view, set its flex-direction to
columnsin the layout panel. -
So easy and powerful, thank you.
Does the whole page look good on your side now? -
1. I would add some left/right paddings for the containers for mobile layout, so the text won’t touch the edge of the screen.
2. Set the parent container of the book container to
overflow-x: hidden, so there won’t be horizontal scrolls. -
Thank you Ying. Better now?
-
Yes, looks better 🙂
-
Hello,
1. Look how the side of the book (fake pages/sheets) is NOT aligned with the book cover when the book cover turns into its 3D version with the animation.
How can I fix this please?
2. Also, how can I get a little vertical line of white space on the small bottom triangle and the cover like on the original animation?
See URL in PI field info.
Thank you so much,
-
1. Adjust the value of
topandbottomfor this selector:.gb-container.cover-container:hover:after2. Adjust the value of
rightfor this selector:h2.gb-headline.read-book.gb-headline-text. -
Thanks.
2. I found how to so for 2.
1. But sorry, I failed to understand how to so for 1. I tried adding this for the selector you mentioned but it made the pages disappear:
`.gb-container.cover-container:hover:after {
opacity:1;
transition:all 0.3s ease;
top: 1226px;
} -
remove the css you added.
You already have this CSS, just need to tweak the
topandbottomvalues, eg.-35px.
I noticed you changed theopacityto0, why do you do that, now it’s invisible, so change it back to1..gb-container.cover-container:after { content: ''; position: absolute; top: -26px; left: 94%; bottom: -18px; width: 75px; background: repeating-linear-gradient(to right, #f5f5f5, #f5f5f5 5px, #aaa 5px, #aaa 6px); transform-origin: 0% 50%; transform: rotateY(42deg); opacity: 0; z-index: 0; } -
Yin,
I did not change the opacity to 0. I changed it back to 1 and now the 3D sheets appears even BEFORE the animation, so it’s wrong. So I changed it back to 0 after noticing that what his screwing the animation was actually “top: 1226px;”, which I removed.
I think I have found the right numbers for top and bottom but i have another issue:
Can you see how the 3D sheets are “eating the top right hand side of the cover. Look at the word “Life” for example and you’ll see that the purple color and space after the “e” is cut by the 3D effect. How to correct and finetune this please?
Thanks
-
Update on top of my previous message.
I copied and paste some text to describe my book. The text starts with “Tired of battling…” and goes up to “shifts in your mind.”
2 things happened:
a- the color of the text is automatically written in purple. Why does it use the default body text color that is gray?b- and here’s the real issue: adding this text seems to have change the size of the book cover. You can see that the 3D effect that was perfectly matched to the book size is not way bigger than the actual cover, which seems to have be reduced in size after I added the description text. How to avoid that and make sure the size of the cover and the related effect are not affected whatever the size of the text added on its side?
-
Hello,
Anyone?
Thank you -
a- the color of the text is automatically written in purple.
The parent container text color is set to purple.
How to avoid that and make sure the size of the cover and the related effect are not affected whatever the size of the text added on its side?
The Parent container is set to
display：flex, it’s normal behaviour for the flexbox children to be the same height. Select the container, and setalign-itemstoflex-start. -
The Parent container is set to display：flex, it’s normal behaviour for the flexbox children to be the same height. Select the container, and set align-items to flex-start.
Can you please share a screenshot of where I can find/do this? Have a look at mine.
- You must be logged in to reply to this topic.