Trouble displaying in mobile

Trouble displaying in mobile
0.0 0

#1

Hello, I have been tinkering around with height and width in mobile but when I do width: 100% and height: 100% for any selectors in css, nothing seems to affect it. Below I have the last dimension it looks great in and the one after it shows it not taking the screen size.

412 x 517:

386 x 517:

Also, I am trying to fix the button spacing, but I think that involves changing the current column grid sizing in Bootstrap.

Any help would be appreciated, thanks!


#2

css-tricks.com has a couple good articles explaining some of your options as far as image sizing goes. width/height: 100% is relative to the parent element, so setting those alone will never cause your image to “escape” whatever’s containing it. Your code isn’t posted so it’s hard to advise past that.

One article, and another. The techniques you’d likely use to get full-screen images are similar to what’s mentioned in the articles.

It will, of course, require decisions about whether you want to zoom/clip the image to display what fits on the screen, or (hopefully not) stretch/distort the image to fit any aspect ratio.