11 replies · opened Jan 9, 2018
The client uses a logo that is 263 x 77 which makes retina logo 500+ wide, site pagfes and logo does not display properly on samsung galaxy tablet in either orientation. Page banner images not sizing properly on tablets and menu isn't displaying as expected. Need help
on mobile phone logo overlays the 3 bar menu icon, how can logo be centered or any other method that looks as expected, like canvas demo with canvas logo
Hello,
Thanks for your Patience! We have checked out your Website and the issue is with the Logo Dimensions. Please make sure that you use a Logo with height of 100px (you can easily modify this in Photoshop). The Width of the Logo can be flexible.
Additionally, in the Responsive Version, the Logo overlays the Hamburger Menu since the Width of the Logo exceeds the Menu Area. However, you can fix this simply by using the following CSS Code:
.device-xs #logo img {
height: 70px;
margin-top: 15px;
margin-bottom: 15px;
}This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Attached are the two logos I have, was not sure exactly where to place the css code you sent so I placed it in the root of responsive.css and when I run the code the logo disappears
Hello,
We have just tried checked out your Retina Logo but it returns a Blank Pixel. Please check this link: http://www.bchtexas.com/images/logo@2x.png . Make sure that your Logo is in the Proper Format and saved properly. This will automatically fix the issue. Thanks for your Patience.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Why are we going back and forth on this. I have attached the logos used, they are both .png. The main logo is 100ph high and the retina logo is double that at 200px high.
whether I use this code or not the retina logo does not show. Is there a way to resolve this without using retina and just call a small logo into the mobile phone view or use CSS to minimize the size of the main logo. Your previous email wasn't clear where I should insert this code
.device-xs #logo img {
height: 70px;
margin-top: 15px;
margin-bottom: 15px;
}
I dont understand why the upload isnt not showing the attached PNG logo. I have attached a jpg that 2x the main logo of 281x100
if you look at bchtexas.com on mobile you will now see logo@2x.jpg using this line for retina
I added this css below line 1800 in responsive.css but it made no difference,
.device-xs #logo img { height: 70px; margin-top: 15px; margin-bottom: 15px; }
while the logo is now centered it still overlays the menu bar.
Please look at same url using tablet. In portrait mode the logo overlays the menu bars but in landscape view the menu is not working properly
Hello,
Thanks for all your Patience! We have checked out your Website just now and the Retina Logo appears to be working fine now. Meanwhile, we have noticed the Logo is aligned to the Left and overlays upon the Hamburger Menu Icon since the text-align: left; has been set for the #logo in the css/responsive.css File inside the @media (max-width: 991px) Media Query. Setting it to center should fix the issue.
You can also use the following CSS Code to make your Logo size properly on small mobile phones:
.device-xs #logo img,
.device-xxs #logo img {
height: 70px;
margin-top: 15px;
margin-bottom: 15px;
}This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Where do I place this code .device-xs #logo img, .device-xxs #logo img { height: 70px; margin-top: 15px; margin-bottom: 15px;}
Also please look at the site using tablet in horizontal/landscape orientation and advise logo and menu placement, it doesn't look right
Got it to work, thanks for all the support
Hello,
Thanks for your Patience. Really Glad that your issues were resolved.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard