Chrome and Firefox rendering issue

Support
#1

Hi,

I have a site that I designed in Apple Safari, but when rendered in Chrome or Firefox, the margins and padding get messed up in 2 sections. The issue shows up on the homepage.

Website: http://spencersmithcriminaldefense.com/

It’s supposed to look like this:

#2

Hello There,

Thanks for writing in! I have inspected the page and I can confirm that the Chrome and Firefox has a different display out output compared to what is displayed in Safari. It turns out that the left column and the image is not using the same row. They are of separate row containers which contains z-indexes, margins and padding that has been rendered differently in Safari, Chrome and Firefox. Because they are of separate row, it got worst when viewed in Firefox: http://prntscr.com/kj5tuz

Please re structure your rows and elements to avoid any complications and cross browser incompatibility. Place only one text column and one image column. No duplicates for different screen viewing to avoid confusion when editing. Place the image first in the left column and the text on the right column then add a custom css to float the image to the right so that the image will be on top in smaller screens and on the right side on larger screens. Having this set up removes the redundancy which you are having now and eliminates the cross browser incompatibility of your designed perspective.

I would love to duplicate the current page and give you an example of what I have suggested.

Please let us know how it goes.

#3

Yes, It’d be wonderful if you could give me an example. Below is my login details

#4

Hello @SpencerSmith,

Thanks for updating the thread.

Please use the secure note feature to share login details. That way information is in between you and Themeco staff.

Thanks.

#5

Great, I did so in the comment above when I quoted RueNel. Thanks

#6

Hello There,

I have tried and tried but I could not mimic your layout because you have a very complicated the design. To fix the issue in your original layout, you just need to eliminate the empty space in the actual image. And then adjust the bottom padding of the section container of the image.

Please let us know how it goes.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.