Image height similar / captions aligned

Bootstrap Studio Help
1

Greetings. I just found Bootstrap Studio this evening but am still running into an issue in which I came from MobiRise as I am attempting to bring some of friends' websites to the responsive world.

I am trying to align all my captions underneath all images/artwork by hopefully creating similar heights throughout all the images. I have uploaded 2 screenshots.

First image. A website I built a while back using tables in which I can easily have aligned images horizontally and align all my captions, so no matter the height or width of the image, it is composed well, but of course, it's not responsive.

The second image is an attempt in Bootstrap Studio. Where I made a row, with 3 columns but as you can see, I cannot control the caption info to clean up like using tables. I have tried several things.

img { width: auto; height: 250px; }

Unfortunately this works in Desktop mode, but when sized down in the mobile browser, imgs stay at 250px height and distort.

Tables Websites

Bootstrap Studio Sample

I would appreciate any help to solving this image formula. It seems 99% of all responsive websites have similar sized, cropped images in the image galleries.

Many thanks!

2

You can use media queries to set different heights to your images based on the device's viewport size.

For example to set those in BSS4, select an image. Then in the Design pane (bottom/right) expand the Styles menu and double click on styles.css. In the Styles pane (middle/bottom/right) click to create a new CSS rule then on that rule click on the triple dot stacked menu and select Add Media Query. That will create a media query rule for the currently selected device you have selected in the device toolbar (middle/top/right). Click a device in the device tool and then do the media query creation again for that device etc.. etc.. It might be better to use max-height rather then setting a specified height, you'll just need to figure out if that's what you want to do. You can then use flexbox settings to vertically/horizontally set the position of the image.

Saj

3

As kind of best practice you may define

  • an intial html { fon-size: 12px; }

in STYLES or one of your CSS Styles-Sheets - best, the one load first - in my cases it's a CSS called global.css for that things.

For all other size-depended components and codes you should use relative values like

1.5rem instead of 18px (12px * 1.5rem = 18px)

you may also use other relatives as em. The difference with rem and em is the "r", which is named as "root" targeting to the size in the html-tag.

em is targeting to the last "font-size: ..px" definition of parent folder.

Now you can create @media queies as mentioned above to set different rem to different screen sizes like

@media (min-width 1200px){ html { font-size: 10px; }</p>

<p>@media (min-width 800px){
html {
font-size: 8px;
}

All components using rem will follow this rules and resize when the screen width is changed.

Another way to change ist using javascript to change CSS Styles by

  • changing the html -> font-size
  • changing font-size for parent container if em is used for its childs (good for in/decreasing editors/views content of a single e.g. <div>
  • changing transform: scale() for the target component
  • and others ...

Hope, that helps...

Ralph