I am working on new web site and I have added pictures to the rlm design. But the size of the pictures seem to very based on the picture size. Can I make a box that the picture sits in with a border that has a fixed size. I would like to make the pictures uniform so that they line up better.

Here is the web site http://m.carterscustomsound.com, the mobile size seems OK it is when I stretch it out past that size.
I would like it to look more like this, http://carterscustoms7559-57838-sml-1.hibustudio.com/home/1237728.

Hi there Todd,

That really defeats the whole purpose of RLM. This tool builds responsive layouts so as soon as you put a fixed size on an image it will no longer be responsive. So the answer to your question is technically yes you can with a bit of css but the bigger question would be why?

What I usually do is edit my image to the size i would like to see it at full view and add that to RLM. If RLM changes the size of the image just go to the properties of that image and adjust the max width to match the image.

let us know how you make out.

You both are right. I agree with Steve. A fixed-sized image is not always the best in responsive programming. The real question is what you actually want to accomplish. There is a way that you can stay responsive and have the same picture size. Here are some ideas.

Choose pictures that are all the same in size and layout (portrait/landscape). If the pictures you want to use are different sizes or layouts, use your photo editing software to crop them to the same size and layout. Once you do that, even if the picture size reduces, everything stays lined up.

Be sure to set a max-width on your images. Consider the first image you have there with all the wires. It looks normal at full size. However, it seems huge when at mobile sizes. A max-width takes care of that.

You don't always have to have three columns in a row. For example, right now you have it set so that the picture sizes reduce until the screen is about 475 pixels wide. If you were to set a breakpoint at about 700px, you could make the first two columns with the pictures (experience and custom designs) go 6 spans each. Then make the protect your property column go 12 spans and float the image left.

I noticed that you are using two different images in the first column (experience). One displays for the large screen and the other displays for the small screens. Having two images makes the page take longer to download. Instead, use one image and set a max-width at each breakpoint.

Hope that helps.