-
This container:https://app.screencast.com/Mmi6Nfte3ugUR
The align-items option can be found in the layout panel.
-
Thanks, I corrected it.
1. But everytime I updated the size of the text on the right-hand side, the size of the book cover is adjusted to a new size.
2. Also, I tried to scale it at 70% and here’s what happens.
How to do to avoid both 1 and 2 and make sure the cover and 3D effect will always look good?
-
Do not adjust the image size, set it back to 100%.
You can adjust the width of the cover container.
-
1. I set the image back to 100/ Please have a look. Still not good.How to fix it?
2. Also, what if I only want the image to be 70% of its size? -
Select the cover container, click the add to container button, then you can set padding-left and padding-right for the new parent container of the cover container, for example, 15% padding-left and 15% padding-right.
-
Ying, thank you. But please have a look at what the animation does.
There’s a lot of white space between the 33D cover and the 3D book’s edge. How to fix this please?
I sincerely hope we can fix that now. It’s been a lot of back and forth on this animation and thank you for support here.
-
Can you read my previous reply carefully and do what I suggested?
-
I read again and applied again but it does not fix the big, wide white space between the 3D effect and the 3D cover where I draw the red line in for your to see.
This new link I shared shows the exact same issue than on my previous message, with a different screenshot.
-
Please check my reply, and you surely didn’t do this:
Select the cover container, click the add to container button
You need another container wrapping the cover container.
-
Ying, I did this like 3 times.
I may not be a native English speaker, I don’t understand where our miscommunication comes from here. So, can you please be more explicit for obviously, there is something I don’t understand here or do wrong. Thank you.
-
I said to select the
cover-containerand click the add to container button, not the image block.
https://app.screencast.com/eoIdlQ5LYFGe8 -
This is what I did again. I now have 4 containers containing the image-block.
No change. The layout issue is still here.
Can you please:
1. rephrase my issue to make sure we are speaking of the same layout issue to fix?
2. help fix clean the 4 containers that must be kind of useless since I added them just because I was trying to do my best following your instructions.
3. help me fix the layout issue.Thank
-
Yes, now you have done the correct thing, and you can remove the 2 extra containers you added before by mistake, drag the image out of the container, and put it directly nested in the
cover-container.So the structure would be:
- container A -- container B-1 (newly added) --- container C (cover-container class) ---- image ---- headline -- container B-2 (all the description text)Now select container B-1, you can set
padding-leftandpadding-rightto5%to reduce the image size without affecting the effect.Hope you can read my reply more carefully in the future, so we can help you more efficiently.
-
Ying,
I’m neurodivergent and it takes two to tango, so please understand that I’m doing my best to understand your feedback… while English not being my native language.
I tried deleting a few containers to follow your latest instructions but I’m sorry, it breaks everything and I don’t really think I’m doing the right things. So, I came back to the original container structure and decided to write this message to avoids complicating the situation even more.
Can you please specify on this screenshot:
1 – which container is the one you callcover-container. For example, can you mark it in GREEN?
2 – which containers I should delete (can you please mark them with a RED cross)?In the structure you replicated above, the Image and the Headline are contained in the same container. It does not match with my screenshot and that’s also where I’m confused.
Thank you and happy new year
-
Hope this is clear 🙂
https://app.screencast.com/d4YLb9FJXeweW1. Drag the image and the headline below the
cover-container(the class is added to the addtional CSS class field in the advanced panel)2. Remove the 2 containers that I marked with red lines.
Happy New Year!
-
Hey Ying, your instructions and screenshots were super clean. Understood 100%.
Thank you and Happy New Year!I still have issues.
1. Look at what happens to the 3D effect when the person resizes her browser.2. Also, how can I reduce the size of the book and not break the animation for smartphone? I tried reducing this here at 90% but I’m not it works. Also, I’m not how to align the book in the middle of the screen while not damaging the position of the Heal for good! banner on the cover?
- You must be logged in to reply to this topic.