I have centered my logo on my website www.sapy.com using } .header .logo img { margin-left: 197px; } However, when I view the website on my mobile phone, the logo is no longer in the centre, but off to the right. if I remove the CSS code, the logo goes to the left of my webpage when viewed on computer, but is centered on mobile view. Please kindly advise?
Hi, Greeting from InkThemes, We need WordPress admin credentials to configure it. Kindly send the below-mentioned credential details at [email protected] along with the thread link. WordPress Website URL: - WordPress Username: - WordPress Password: - We will do the needful. Regards, Akbar InkThemes.com
Hi Akbar With all due respect, I would rather do it myself unless there is something wrong with the Wordpress file. Please send me the CSS code?
Hi, Greetings from InkThemes, To make the desired changes, just paste the code given below in Custom CSS section. (Dashboard->Inkthemes->Theme Options -> Styling Options -> Custom CSS) of your dashboard. Code: .header .logo img { margin-left: 22vw; } @media screen and (max-width: 992px) and (min-width: 768px) { .header .logo img { margin-left: 35vw; } } @media only screen and (max-width: 767px) and (min-width: 481px) { .header .logo img { margin-left: 0vw; } } Hope this helps...! Do let me know if you need further assistance. I will be glad to assist you. Thanks & Regards! Akbar InkThemes.com
I pasted the code, cleared the cache and cleared my browser history - it seems like the code didn't work as the logo is still offcentre?
Try to paste the code in the Additional CSS section of the theme instead of Custom CSS section, Go to (Dashboard->Appearence->Customise->Additional CSS). Hope this helps...! Do let me know if the problem still persists. We will do the needful. Regards, Akbar InkThemes.com
Hi Akbar Thank you, I changed .header .logo img { margin-left: 22vw; } to .header .logo img { margin-left: 19vw; } and I think my logo is centered when viewed on my computer screen. However, the logo is still off centre for the mobile view. See image: I tried changing the values on each of these, one at a time, but didn;t see a difference. @media screen and (max-width: 992px) and (min-width: 768px) { .header .logo img { margin-left: 35vw; } } @media only screen and (max-width: 767px) and (min-width: 481px) { .header .logo img { margin-left: 0vw; } } Please advise?
Please remove this CSS code: Code: @media only screen and (max-width: 767px) and (min-width: 481px) { .header .logo img { margin-left: 0vw; } } And paste this CSS code: Code: @media only screen and (max-width: 767px) { .header .logo img { margin-left: 0vw; } }
You are most Welcome! Always feel free to ask your queries at our support forum: http://inkthemes.com/community/ and at our email [email protected] We would be glad to assist you... Have a nice day! Thanks & Regards! Akbar InkThemes.com
