Dashboards & Visualizations

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

pgadhari
Builder

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

Labels (1)
0 Karma
1 Solution

pgadhari
Builder

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.

View solution in original post

pgadhari
Builder

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
Legend

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

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

pgadhari
Builder

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

0 Karma

pgadhari
Builder

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

0 Karma

nagar57
Communicator

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

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...