Problem with image display when...

User 2592569 Photo


Registered User
17 posts

I have a page on our website that has thirteen logos of corporate sponsors of our non-profit. They reside in thirteen subgrid columns of equal size within a half page wide subgrid. All of the logos have different aspect ratios so are in different classes - the dimensions of each image (class) are set on the design page to fit the logo centered in its respective column. Twelve of the logos (#1-11 and #13) display correctly when published -- the 12th doesn't -- it is huge. This doesn't happen when I preview the page on Firefox or Chrome. Only when published. I have compared the imput settings on #12 with the other images and other than size they are identical. I inspected the HTML when reviewing it on Firefox after publishing and do not see any differences from the other logos -- but the image is at least twice the size it is supposed to be. I have been chasing this for several days and have no other things to try so I thought I would pulse you all for a potential solution. Thanks for any support you can offer.
User 2273654 Photo


Registered User
767 posts

Laurence, Today I have been debugging my site some by going into the inspector mode and clicking on a row and then finding everything in that row and looking at them for alignment and settings. I found a row that way that I had not known was there by mousing around on the view pg and clicking on items for checking the settings on the design mode. The row that was problematic I was not able to find it in the design mode its outline lines were not visible and I could not grab it and click on it or read that it was there. Found it in the inspector mode and then clicked on it there and then clicked on design mode so I was transferred to it and was able to change design mode setting on a row that I was oblivious to. I ended up deleting that row completely, was not a needed row, contained a redundant text that was already up and readable.
Anyway this may be another way of finding problems. I still have more problems to address but using this method helped me to successfully position all of my rows columns and elements on the grid, and they are rendering properly.
My CC S-drive site https://workhorsepainting.com
User 232214 Photo


COO
827 posts

Laurence Demick wrote:
Thanks for any support you can offer.


Seems some different setting sneaked in. Did you try removing that element (subgrid column preferably, but you could try it on the image too) and followed by copying and pasting a subgrid column that does work. If that looks correct simply replace the image using the 'change' button on the design pane.

If that does not help please add the project (.rsd file) so we can look at the settings.
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2592569 Photo


Registered User
17 posts

Thanks to Greg & Bob for your useful suggestions -- I tried both but did not solve the problem. I am particularly concerned though when I review the CSS HTML -- it repeats layout elements for all of my images in the seven page website more than 3 times -- covering the same ground, (e.g., max idth, minimum height, centering, ...). There doesn't seem to be any pattern to the repeats nor do they all correspond with the current values I have inserted in the design for these images. The CSS I have reviewed is that developed when I export the latest version of RSD. I don't understand this nor some of the notations for the different images I see when I inspect the website on firefox. I am going to open a support ticket to help me understand more of what is going on.

Again thanks for your help, Larry
User 103173 Photo


VP of Software Development
0 posts

Laurence Demick wrote:
Thanks to Greg & Bob for your useful suggestions -- I tried both but did not solve the problem. I am particularly concerned though when I review the CSS HTML -- it repeats layout elements for all of my images in the seven page website more than 3 times -- covering the same ground, (e.g., max idth, minimum height, centering, ...). There doesn't seem to be any pattern to the repeats nor do they all correspond with the current values I have inserted in the design for these images. The CSS I have reviewed is that developed when I export the latest version of RSD. I don't understand this nor some of the notations for the different images I see when I inspect the website on firefox. I am going to open a support ticket to help me understand more of what is going on.

Again thanks for your help, Larry

Having your project file (and screenshots) Laurence really does help us when you ask for help. Otherwise it is just guest work on this end.

Remember we cannot see what you see on your screen so we really need these sorts of things to help comment on any questions you may have. Help us help you! :)
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 2592569 Photo


Registered User
17 posts

OK Scott -- I thought that this might be a larger problem than should be covered in the forum and that I needed to get a support ticket. -- I have attached the RSD file -- the problem images are on the last two logos on the "giving" page -- FL Pinto Club and FL Paint Club. Originally these logos had unique class designators -- fl_paint & fl_pinto -- when I used those (with the same "design" inputs on the attached) the displayed images after publishing were two to three times larger than the other logos and not located correctly. In the attached file I used class designators for other logos of similar configuration as a work around -- the logos now publish in the correct sizes but are not positioned correctly and the entire logo set does not respond "responsively" correctly when the screen size is reduced to the minimum.

I would appreciate help on this issue and on the confusion that I described above when reviewing the exported HTML for the website . Thanks, Larry

P.S. For some reason the "Attach a File" button is not working -- I can send it by DropBox or from my AOL E-mail if that works.
User 103173 Photo


VP of Software Development
0 posts

Zip everything up and post a link to the 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 2592569 Photo


Registered User
17 posts

User 2484360 Photo


Registered User
3,293 posts

Laurence Demick wrote:
Here is the link to the RSD file:
https://www.dropbox.com/s/3ups903ep8ncy … 1.rsd?dl=0


Hello Laurence!

Nice to speak with you again.

As to the issue you are having, there are several things that are going on.

First, the first two columns above the last two logos has a margin left of 2%, remove that. :P

As to the columns the logos sit in, the first is set to 3spans whereas the second is set to 4spans. Judging by your other columns, they both need to be set to 4spans.

The second logo itself, has a class name that is shared with the logo above it. It has a 12% margin applied to it. Check the Auto box under the left and right margin and that will center the two logos to match the others.

User 2592569 Photo


Registered User
17 posts

Good to hear from you again Adam. I checked all of the inputs for the last two rows -- all of the columns are set at 4 spans, 100px width and height and centered. The last two logos are also centered -- I used redundant classes for these logos because if I use a unique class name the logos display twice the size. It is frustrating because when I preview on Firefox all is well even down to the smallest screen size.

Are you looking at the RSD file or the HTML on the published website. As I've noted above, the class references, positioning and type designations that I see when using the inspector on Firefox and in review of Main in CSS don't make any sense -- there is also a lot of repeats in the CSS files.

I appreciate your reviewing this -- I am going to redo the complete set of logos with identical columns to see if that helps. If you have any other thoughts I would appreciate hearing them. If I need to get a support ticket I will do that as well.

Thanks again, Larry

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.