Topic: V4 Cover Image for Mobile Won't stay centered
**Expected behavior** Modified image to 800 x 1200 for mobile and medium screens. Expected it to load centered Following directions from this page: https://mdbootstrap.com/docs/b4/jquery/css/background-image/ **Actual behavior** will initially load centered and then shifts to aligning top left within about 2 seconds. Large screen image loads fine. Code below shows use of object-position, previously tried background-position: center center; and got same result (center then jump to left) Typical CSS recommendations aren't working so checking if there are mdbootstrap-specific settings causing this behavior and if so, how to work around. **Resources (screenshots, code snippets etc.)** https://mdbootstrap.com/snippets/standard/sherylg343/3061121#html-tab-view
Hi -
It’s still not working but at least I know it is has to do with my issues with django not mdb. Thanks again!
Sheryl
Marcin Luczak staff commented 2 years ago
I'm happy that I could help a little :)
Keep coding, Marcin
Hi,
You've created a snippet in the Standard (non-jQuery) technology, for the MDB4 jQuery section please use proper technology in the snippets also. Syntax hidden-lg-up doesn't exist in the v4 bootstrap. I've created a snippet showing new d-{sm,md,lg,xl}-{block, flex, etc..} syntax for showing and hiding elements depending on the breakpoint. https://mdbootstrap.com/snippets/jquery/marcin-luczak/3062134
There is also no visible change of the image alignment.
Keep coding, Marcinaligne
sherylg343 free commented 2 years ago
Thanks for taking a look at it. My go-to is d-none and d-block but the image disappeared using d-block when I tried. I also couldn’t get image to appear without putting it inline previously.now that image is in S3 it may work in CSS. Also if it doesn’t work now I know it has other issues not tied to MDB.
Thanks for your time! Sheryl
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: MDB4 4.19.2
- Device: GitPod
- Browser: Chrome
- OS: OS 10.12.6
- Provided sample code: No
- Provided link: Yes