This website uses Cookies. Click Accept to agree to our website's cookie use as described in our Privacy Policy. Click Preferences to customize your cookie settings.
Accept
Reject
Preferences
Log in to ask a question
Log in to ask a question

How to give padding and margin values for cross browsers and it should be responsive?

Posted on 12-15-2015 04:55 PM
Not applicable
Reply posted on --/--/---- --:-- AM

Hi All,

I designed developer portal in chrome, and its working fine with responsive design, but when i open it in Firefox and IE the padding and margins are not accurate and the position of the text box and buttons are getting displaced and the responsive design is not good. I tried to fix some issues and it works. But the padding and margin issues still remain, if I adjust according to firefox, then it affects in chrome. How do we write a cross browser css to resolve this issue. Attaching the screen shot, when viewed with chrome and firefox.

This display in firefox:

1666-screen-shot-2015-12-15-at-45226-pm.png

The display in chrome:

1667-screen-shot-2015-12-15-at-45401-pm.png

I want the display to be similar as in chrome.

Please give me some suggestions.

Thanks & Regards,

Saranya

0 1 308
Topic Labels
0 Likes
1 REPLY 1

Posted on --/--/---- --:-- AM
chrisnovak
Staff
Reply posted on --/--/---- --:-- AM

Our Apigee Responsive theme uses Twitter Bootstrap as its framework, so if you are using our theme or a sub theme of it make sure to check out how to use Bootstrap to create responsive designs. It is very specific how you use the grid system to lay out columns and how they flow on different screen sizes.

As for the margin/padding issues, you should be able to use the developer tools in each browser (or Firebug) to inspect the margin/padding differences on each browser and see where the values are coming from. Remember that every browser has defaults for things like margin/padding, so most CSS theming starts with explicitly setting margin/padding to zero for all elements.