1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: rotating card top image

rna014 pro asked 6 years ago

Hi I am trying to figure out what would the best top image size for my rotating card. http://35.186.227.142/giftcard.html As you can see, the current image clips on different screen sizes.   R/  

Ollie Vincent pro commented 6 years ago

Hi, Judging by you image now - the browser at 1920px is making you image 445px wide. I suggest shrink your image to this width.

Ollie Vincent pro answered 6 years ago

I see the problem - unfortunately because .card-up has a height, the image will try to fill the gap. In that case I would create different images for different devices, using media queries to show them.

rna014 pro answered 6 years ago

Hiya.. Still has issues when resizing - have uploaded to http://35.186.227.142/giftcard_450_260.html   Kind Rg R/

Ollie Vincent pro answered 6 years ago

Hi,

So looking at your code .card-up (that the img is wrapped in) has a height:50%;.

You could overwrite this but this would cause different issues. Alternatively, you could try changing your image size to 450px x 260px. 260px is roughly the height of the .card-up class.

These are only rough estimates - but how I would try to solve the issue.

If this still doesn't work please leave in your example (link you posted) so we can see the results and work from there :)

Thanks

rna014 pro answered 6 years ago

Hi, Have tried that but it results in a white strip on the RHS for some screen sizes. I really do need to have a image size that is fully visible at all sizes and doesn't clip or show a white strip. I would be ok to change the size of the card to a fixed one if that is what it takes. How can change the card / top photo size or is there other approaches I can try?   R/
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
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
rna014
Pro User 10Support score
4Questions 4Answers 0Snippets