V4 Cover Image for Mobile Won't stay centered

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: V4 Cover Image for Mobile Won't stay centered

sherylg343 asked 4 years ago

**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

Marcin Luczak staff answered 4 years ago

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 commented 4 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

sherylg343 answered 4 years ago

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 4 years ago

I'm happy that I could help a little :)

Keep coding, Marcin
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: 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
Tags
cover-image
About author
sherylg343
70Support score
4Questions 5Answers
0Snippets likes 4Snippets