I have tried uploading my logo from 425px wide all the way down to 250px wide, but it is still going over the right edge of the colored logo block on a mobile phone. After trying a few sizes then clearing the cache I found that 275px wide seems to work best on the mobile but then there is additional space to the right of the logo on the full website between the logo and the header color. (see attached file cic-full-site-screenshot.png)
As for the Social Icons I'm curious as to why they stack vertically when looking on phone in portrait mode. Because they decide to stack vertically they overlap and cover the right side of the logo (see attached file cic-mobile-portrait.png), which then add an addition empty color area under the logo to accommodate for the addition height from the social icons. But when viewing the site on a mobile in landscape the header color area appears and the social icons become horizontal again within that area (see attached file cic-mobile-landscape.png). I have not been able to view it on a tablet yet so I do not know how it converts there exactly. Personally I think that the social icons should always stay organized horizontally. That would make it to where there is no interference when viewing from a phone, and especially since it is only occurrin on a mobile in portrait mode currently.
Additionally, I cannot figure out how to add a background image to my site. I was able to add a background image, but it was on the content sections, logo area, etc. For some reason it not show up on the actual site background.
Thanks.
Comment | File | Size | Author |
---|---|---|---|
cic-mobile-landscape.png | 176.93 KB | youronetouch | |
cic-mobile-portrait.png | 230.92 KB | youronetouch | |
cic-full-site-screenshot01.png | 326.32 KB | youronetouch |
Comments
Comment #1
Hendrik53 CreditAttribution: Hendrik53 commentedThe image should be about max 230 px wide and 47 px high to work on various devices and to leave room for the text below the logo. The logo does not scale auto to fit. That is what I found out.
Comment #2
youronetouch CreditAttribution: youronetouch commentedDo you have any suggestions on how to make the social icons not stack vertically on a mobile phone when in portrait? I understand that taking the logo down to 230px wide will probably make it so that the social icons do not overlap the logo, but at the same time with them stacked it leaves a giant empty space below the logo where you could easily fit the logo again. It just does not look very clean. Plus with the social icons being white they are visible on the green background of the header on the full site, mobile in landscape and a tablet as well. In order for the logo to show up properly it has to be on a white/light background which makes the social icons difficult, if not impossible, to see in mobile portrait mode.
Comment #3
youronetouch CreditAttribution: youronetouch commentedIf you look at the demo screenshot of the mobile here (https://drupal.org/files/project-images/premium_responsive_mobile_view_0...) it has the social icons set horizontally. So why is it that mine are stacking vertically?
Comment #4
youronetouch CreditAttribution: youronetouch commentedI got most of this figured out.
The logo I got to be responsive and change depending on the device. In the layout.css file under each of the @media only screen and (max-width: ...) I set the #headright and #logo to my desired dimensions. For the two mobile versions (portrait and landscape), I made the width 100% for both tags (with a max width of my image width for #logo). Then in the page.tlp.php and maintenance-page.tlp.php files I had to add the max width of 100%.
if ($logo):
print $front_page; " title="print t('Home');
"> print $logo; " alt="print t('Home');
" style="max-width:100%;"/>endif;
With the above fix on the layout.css making 100% width on mobile ensures that the social icons will be below the logo. In order to make sure the logo does not get cut off on computers and tablets the #headright must be added and decreased from its original size (I believe it was at 600px).
Now my only problem is being able to add a background image to my site.