Sun, 2016-04-10 10:43
Hi all, I'm new to the forum and decided to join up because I really want to get a handle on web site programming myself rather than paying others to do work which may or may not be suspect coding as I am dealing with now.
I have an issue after paying an Asian kid in Indonesia (first mistake I expect as he is charging good money to produce bad code) to custom code up a child theme for me on a WP site Divi Theme.
I don't know if it is okay to post a URL so I hope so as I can't see a facility for posting screenshots. My site is http://manicbotanix.com and the problem is that the way the CSS and header php has been handled is that the image of the little shop of horrors plant in pot at the right of the header looks great on a 15inch lap top but when on a larger screen it is horrible and is further left on the browser and covers a menu item.
I'm trying to learn some CSS now and can do very basic things but this one is beyond me and frankly I would be happy to pay a real CSS programmer to fix the issue or better yet have people help and explain how I can fix it because as I said I really want to get a handle of web programming and have a bunch of CSS and php training films to watch but I am way to busy building my site to do this right now. The CSS code for the header is excerpt of
/* Theme Name: Divi child theme Template: Divi */ @import url("../Divi/style.css"); /* YOUR CSS EDITS GO BELOW THIS LINE AND AND CSS RULES YOU MAKE HERE WILL OVERIDE THE MASTER DIVI THEME CSS RULES */ .logo_container { display: none !important; } .et_header_style_centered #logo, .et_header_style_centered #et-top-navigation, .et_header_style_centered nav#top-menu-nav, .et_header_style_centered #top-menu { float: left; } .et_header_style_centered #top-menu > li > a { padding-top: 2em; padding-bottom: 2em; } .ig-search { position: absolute; right: 0; top: 30%; } .c_banner {margin:10px 0px 30px 0px; width:100%; height:175px; background-image:url(<a href="http://manicbotanix.com/wp-content/uploads/2016/03/bg_green.gif" rel="nofollow">http://manicbotanix.com/wp-content/uploads/2016/03/bg_green.gif</a>);} .banner_slide {margin: 0 auto; width:1080px; height:175px; position: relative;} .psy_img {position: absolute; right:0px; top:-10px; margin-top: -80px; z-index: 999999;} .dev_img {position: absolute; right:5px; top:+70px; margin-top: -80px; z-index: 999999;} .logo_float {position: absolute; left: 0px; bottom: 0px;} .rev_sld {width: 745px; height: 110px; position: absolute; left: 0px; top: 0px; margin-left: -35px;} .c_slide_rev {width:280px;} .et-cart-info { display:none; } #page-container {min-height:100% !important; position:absolute !important; width: 100% !important;} #main-footer { position: relative !important; width: 100% !important; bottom: 0px !important; } <code/> There may be some more to this picture also as there is a custom header php file. Like I said I'd really like to learn this stuff myself but if need be would be happy to pay a CSS/web dev expert look over and fix the code and then explain what was wrong with it so that my own understanding of CSS improves and so I can better understand the coding of my site but clearly it was handled badly from the outset. I now need to fix this and any input would be greatly appreciated.... Thx
Sun, 2016-04-10 10:45
#1
Oops dropped some text there
Oops dropped some text there after pasting the code so the rest here
There may be some more to this picture also as there is a custom header php file. Like I said I'd really like to learn this stuff myself but if need be would be happy to pay a CSS/web dev expert look over and fix the code and then explain what was wrong with it so that my own understanding of CSS improves and so I can better understand the coding of my site but clearly it was handled badly from the outset. I now need to fix this. Thx
Wed, 2016-05-04 05:44
#2
Hi Grantlow, yes indeed, it
Hi Grantlow,
yes indeed, it has been setup a bit amateuristic but the reason the image get blurry the larger the screen is because the size of the image isn't all that big.
The size of the image is 317 x 283 pixels. Official image you can find http://manicbotanix.com/wp-content/uploads/2016/03/psy_img1.png
So instead of using such a small image maybe consider using a bigger and better looking image and make it responsive.
Also I figured I needed to say this, it has z-index: 999999 meaning it will sit on top of all the other div's and stuff. So getting the mouse on the last menu item is impossible because the image is in the way. Only if I go to another spot of the menu I am able to click the last menu item. Guess this needs to be altered as well.