CSS for adjusting margins on Small and Big Screen for landing page in Splunk

[pgadhari]

This question is purely related to CSS/HTML issue. I have added a landing page for our Splunk environment which consists of the links for all the applications. I am facing some issues related to the Margins of the elements on the html page. I have attached the html code, CSS code and the Screenshots for the page to get better understanding of the issue.

Problem is - When I open the Page in Big Screen, the margins and alignment of the elements are centered and looking proper, but when I open the page in Small Screen (like Laptop Screen ), the Margin of the elements is getting disturbed. The top header, cards and the images alignment are getting disturbed. How do I fix this, as I tried modifying the margin-left and margin-right to auto but it is not working.

Also, the view in Small Screen is getting scrollbar which I want to remove and the zoom should also be adjusted as per the screen. Currently, the view in small screen is also looking big. Please help to resolve these issues ?

link text

[pgadhari · Accepted solution]

I was able to resolve my issue using Media and Zoom property of CSS. Hence, I am closing this question, considering my comment as an answer.

[niketn]

@pgadhari I am glad you were able to figure this one out. If possible add a little more detail to the CSS Style override used in order to assist others facing similar issue! Cheers!

[pgadhari]

@niketnilay - Ya sure. I will add more details on how I resolved it. Thanks.

[pgadhari]

@niketnilay - can you have a look at it and provide your suggestions please ? thanks.

[nagar57]

@pgadhari I also want the zoom to get adjusted automatically for the whole Dashboard. Can you post your solution so that I can refer it?