Need changes to corson

site: http://0.000.0.000/~corson/
On MOBILE
We need help fixing Margins on Mobile display.
- remove "extra space" above the header
- remove background image due to boxed desktop layout so white space goes side to side on mobile

https://cdn.livechat-static.com/api/file/v2/lc/att-old/8801096/5486198a07cd745e2b96953a2c5bc90b/xMobile-Margins-issues.jpg

On Desktop ONLY
If possible our client wants to fix the current design as the attached (for Desktop only).
(Images for logo, background and even combined logo+background are in the Media library)

Current: https://cdn.livechat-static.com/api/file/v2/lc/att-old/8801096/273eb6e1666919f5d369f5e4ae64ca18/xCurrent-Top.jpg

new: https://cdn.livechat-static.com/api/file/v2/lc/att-old/8801096/4bef22ea163e801ee7522e756f8cdfcd/xWant-This-Top.jpg

  • Nithin

    Hi Meredith,

    On MOBILE
    We need help fixing Margins on Mobile display.
    - remove "extra space" above the header
    - remove background image due to boxed desktop layout so white space goes side to side on mobile

    Regarding the screenshot shared in the above ticket in mobile, and the current look when I check the page looks different.

    Was this corrected? Or does it need further adjustments? Please advise, if I'm missing anything.

    On Desktop ONLY
    If possible our client wants to fix the current design as the attached (for Desktop only).
    (Images for logo, background and even combined logo+background are in the Media library)

    Could you please try the following CSS, and see how it behaves?

    @media screen and (min-width: 480px) {
    
    #Top_bar > div > div > div.top_bar_left.clearfix {
    	height: 180px;
    }
    
    	#Top_bar > div > div > div.top_bar_left.clearfix > div.logo {
    		background-image: url(http://69.175.75.178/~corson/wp-content/uploads/2018/11/logo-full-width.jpg) !important;
    	background-position: 50% 41%;
    	background-repeat: no-repeat;
    	position: absolute;
    	background-size: cover;
    	left: -2%;
    	width: 104%;
    	height: 150px;
    	}
    
    	.header-stack #Top_bar .logo #logo {
    		visibility: hidden;
    	}
    
    	.header-stack.header-center #Top_bar:not(.is-sticky) .menu_wrapper {
    		margin-top: 11%;
    	}
    }

    The image is a bit small, so it's appearing a bit stretched out. You can add the above CSS under Appearance > Customize > Additional CSS section of your WordPress dashboard.

    I hope this helps, please let us know how that goes, and if you need any further assistance. Have a great day ahead. :slight_smile:

    Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.