Greetings…. copy of my post from WordPress Forum…
Very nice theme folks! I have the need to edit the CSS in the HOME PAGE (appearance / home page ). The real issue is mobile & tablet display. There’s no padding on these @media. The result is everything on mobile & tablet is “flush left” which makes text items rather messy.
My fix (padding: 5%;) will work perfect, if I can get to the embedded css (Lines starting -approximate- #217….http://video.compathos.com)
The code:
/* Layout 2087 */ #pg-2087-0 { margin-bottom:25px } #pgc-2087-1-0 , #pgc-2087-1-1 { width:50% } #pg-2087-1 .panel-grid-cell { float:left } #pl-2087 .panel-grid-cell .so-panel { margin-bottom:35px } #pl-2087 .panel-grid-cell .so-panel:last-child { margin-bottom:0px } #pg-2087-1 { margin-left:-15px;margin-right:-15px } #pg-2087-1 .panel-grid-cell { padding-left:15px;padding-right:15px } @media (max-width:780px){ #pg-2087-0 .panel-grid-cell , #pg-2087-1 .panel-grid-cell { float:none;width:auto } #pgc-2087-1-0 { margin-bottom:35px } #pl-2087 .panel-grid { margin-left:0;margin-right:0 } #pl-2087 .panel-grid-cell { padding:0 } } #footer-widgets aside { width : 33.333%; }
Where is this code??? answer:wp-content/plugins/so-panels/siteorigin-panels.php
Where is $css being pulled in from ? is there any external CSS capability within HOME PAGE? (have tried without success to add the padding: 5% in that particular row…. just not working)
please help…..
Hi Robert,
That CSS is being generated on the fly for specifically that page, hence the inability to see the stylesheet. I recommend adding the stylesheet via a child theme stylesheet or via the SiteOrigin CSS Editor plugin. Apply !important to the attribute to ensure it’s not overridden as chances are you’re not going to be more specific.
Also, I recommend the use of a media query rather than general CSS for the padding. That way you can create a more fine-tuned version for desktop.