- This topic has 7 replies, 2 voices, and was last updated 5 years, 9 months ago by
.
Hi, if you’ll visit my site http://www.eikonresearch.com
You’ll see that there is some padding over to the right side of the screen. You can see it on the gallery, the contact page, etc. There’s also white space between the footer and the contact area. I want it to fill the screen entirely. I’ve played around with the CSS but I can’t seem to get these two issues fixed. Please help!
I’ve fixed the padding issues that were on the right, but I’m still having trouble with the space between the footer and contact area.
One other thing, my header bar links are blue if they have a “#section” link in them. I thought they were only supposed to be blue if that section was active?
Thanks.
Hi @ukbballrulez33,
I hope you are well today and thank you for your questions.
I’ve fixed the padding issues that were on the right, but I’m still having trouble with the space between the footer and contact area.
You can remove it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.home .page-content .sh-comments { display: none; }One other thing, my header bar links are blue if they have a “#section” link in them. I thought they were only supposed to be blue if that section was active?
It displays blue because the link is active and refer to the same home page.
If you want to display it active only when you scroll on that section then to achieve this you have to develop custom code in the child theme of Jevelin theme as described in the following page.
https://jsfiddle.net/cse_tushar/Dxtyu/141/
http://www.instantshift.com/2014/11/14/jquery-page-scroll-active-menu/
https://ayanize.com/snippets/how-to-highlight-current-menu-items-on-a-one-page-site-in-divi/
Best regards,
Shufflehound teamThank you for your help – another question.
Now there is too much padding between the contact section and the section above it. For all other padding issues, I’ve gone into Custom CSS, got the class (for example: .sh-section-1c5bd9f269bb144dc81c3cafd76d10ff), and then created my custom css padding.
However for THIS section, the number on the dynamic class changes every time I refresh the page. So I can make changes in the Custom CSS, but then when I reload the page, the old padding is there.
What is the fix for this? Thanks.
Solution for this topic
That padding is added to the section added in the page so please edit the page and that section and remove the padding from it as shown in the attached screenshot.
Thank you for your help. One last thing.
Go to the “Solutions” section of my website and bring it up on a mobile device. You’ll see that once it reaches the “Software Development” section, a lot of the text gets cut off. Is there a way to expand this container and make it longer in the mobile version so that all of the text will fit?
Thanks.
Nevermind, I found the property for the mobile height in the WordPress backend.
Can someone explain to me or point me to an article for how Jevelin is creating this “dynamic css”? I’m a developer and would like to learn more about this.
For example, when I changed the height using the interface, I found that the height was in a new in-line style called “#iconbox-slider-(long string of characters)”. However when I search for the ID “#iconbox” the only instances of it are in that dynamically created CSS. I tried to set that exact same “height” property in CSS, but could never get it to work. I’m confused on how this works, and as a developer would like to learn more about it.
In the following theme file please see the code of function jevelin_dynamic_styles_update in which dynamic CSS is generated.
/jevelin/inc/hooks.php
You can overwrite any theme CSS by adding it in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
Just make sure you are defining higher CSS specificity as described in the below pages.
https://www.w3schools.com/css/css_specificity.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
