Phone size image has space above it

I am fairly new to BS and am stumped on something that is likely very simple and very basic. I have added a section, made a css block for it. I add a background image and set it to center, contain, and no repeat. The body has been set to 100% width and 100vh. When viewing it the image on large screens still has some space on either side. And when checking what it looks like on a phone it has a considerable space above the image. How might I get rid of those spaces?? Thanks for any help. Tom

My apologies for responding to my own post but I did find that by changing the “center” to “top” that is does bring the images up to the top of the page. Onlarge screens there is still a space to either side of the image and when I add another section below it there is space between both sections. ugh

Hi Trgolden!

If you are using a container or a column that your image element is inside of these elements have what Bootstrap calls gutters, it adds space around the elements so that text and other elements inside them have spacing between them.

If you select the elements and look in the options panels for them you should find these settings. I think the row element may also have some options about gutters, but I’m on my phone just now so can’t double check!

You’d ideally want to use the options panel to turn the gutters off but you can also apply p-0 to your elements. P stands for padding, and 0 obviously meaning none.

If you’re still struggling, sending a link to your site can help us out too!

1 Like

Thanks very much Catkin. That gives me some ideas to use to experiment and learn more about this program. Much appreciated!

1 Like