topic CSS for adjusting margins on Small and Big Screen for landing page in Splunk in Dashboards & Visualizations

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

pgadhari — Mon, 08 Jun 2020 00:07:42 GMT

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

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

pgadhari — Mon, 29 Jul 2019 05:23:18 GMT

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

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

pgadhari — Thu, 01 Aug 2019 06:57:51 GMT

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.

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

niketn — Thu, 01 Aug 2019 07:28:07 GMT

@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!

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

pgadhari — Thu, 01 Aug 2019 07:34:49 GMT

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

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

nagar57 — Mon, 18 May 2020 09:43:17 GMT

@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?