Need help with images and sizing and...

User 461879 Photo


Registered User
82 posts

Hey everyone, I am having some issues trying to figure out the sizing and how to fix the issue with a couple images.

The site is www.cancundiving.net

You will see I have a logo centered at 4:3 and max size of 449
Then I have a Padi Scuba logo image same thing, centered and 4:3 at max with of 449

Near the bottom I have two other images next to each other which is where I have the problem.

All images look fine on a laptop or desk top. However, when looking at the site on my cell phone, the top logo looks great, the Padi Scuba logo looks fine, but the two lower pictures get much smaller and look terrible.

I was hoping that when looking at the site on the cell phone the images would still be a good size or even better, show one on top of the other. I don't know if that is possible unless I put them in different rows. But then they are not next to each other on the lap tops or desktops.

On the rest of the site, It will still be two pictures but different ones, maybe three, with text links under them taking people to a specific tour page so my preference would be to have them horizontal on the pc's and on top of each other on the cell phone if possible.

Thanks in Advance Jon

User 52081 Photo


Registered User
18 posts

Are both of the problem photos in the same column?

If so, then you need to make two columns in that row. If your row is 12 spans, you'll want two columns 6 spans each in that row. Place a photo in each column (it works for text too) and check to see if it behaves as you like.

BTW, there's a slider at the top, just below the menu items. You can slide it back and forth to see how the site reacts at different resolutions, and set breakpoints that allow you to change behaviors at certain resolutions.

Best of Luck.
User 461879 Photo


Registered User
82 posts

I actually just tried that a little while ago. One row, 12 spans, two columns 6 spans each. A photo in each column and they did the same thing. Just got smaller and did not change their line up on top of each other.

I am familiar with the slide bar to see how it looks at different.

I guess I will keep trying different things but the two pics just keep staying in same row instead of lining up over one another.

Thanks
User 461879 Photo


Registered User
82 posts

How can I make a horizontal row with two or three columns stack? I have tried everything. I have watched several videos, can not find a solid tutorial, and have looked at many templates and can't find what I am missing.

The photos in the row just get small instead of stacking.

Any help will be great!
User 187934 Photo


Senior Advisor
20,181 posts

Try setting a clear on one of the images under the POSITION segment on the Design tab.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 379556 Photo


Registered User
1,533 posts

If I have understood correctly
1. the two pictures were in the same column;
2. there had been some experimentation with having the pictures in separate columns, but this was abandoned;
3. the pictures probably are probably each set
a. with a width setting that is a percentage of the column, and
b. with no minimum width setting;
4. the experimentation with two columns left those columns at 6 spans each.

I'm wondering whether their intended effect of the two column solution may have been prevented by item 4 above.

Putting pictures in separate columns works fine. One moves the slider at the top to the left until one reaches the point at which one wants the columns to stack to allow the pictures to be larger. At that point one clicks on the + button above the slider line (that creates a break point) and increases each of the columns to 12 spans. Since the row is only 12 spans, the columns are forced to stack.

Please forgive me if the above is aleady obvious and the problem relates to something far more abstruse.

Frank
User 461879 Photo


Registered User
82 posts

Hello Eric,

I tried to add a clear to both pics and no change. They still just get smaller instead of stacking. ???
User 461879 Photo


Registered User
82 posts

Hello Frank, The row has several columns and each photo is it's own column. I have tried your suggestion on creating a break point and same thing. Each picture just gets smaller and does not stack.
User 103173 Photo


VP of Software Development
0 posts

Can you upload your project file?
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 461879 Photo


Registered User
82 posts

Hello Scott. Yes, Any help would be great.

I am actually getting an error trying to attach the file.

Your attachment must be one of: .TXT, .SNP, .ZIP, .RSD, .RLM, .RLMP, .RED, .GIF, .JPG, or .PNG format.

The file is saving on my pc as a .rlmp

????

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.