Hello Cargo,
I use the Elena Style on www.2bd1.org
There are 3-4 little Bugs on the mobile-version, we added to cms and html customization (all on iphone iOS 5.1.1)
So first of all, i would like to show, what we have done including changing layout to three columns on mobile
@media only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
.header_img {
margin: 30px auto 30px auto;
width: 687px;
z-index: 11;
}
.nav_container {
font-family: Arial, sans-serif;
line-height: 2.4;
margin: 0 auto 30px auto;
text-align: center;
width: 687px;
z-index: 50;
}
#items_container {
clear: both;
margin: 1px auto 0 auto;
position: relative;
width: 687px;
z-index: 9;
}
}
At the same time, we added in html customization for all kind of screens the following code, to show a
a) Sharelinks with our own icons
<center><script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-50446bd70e559841"></script>
<a class="addthis_button_preferred_1"><img src="http://payload79.cargocollective.com/1/8/260184/3895921/Facebook_o.jpg" width="20" height="18"/></a>
<a class="addthis_button_preferred_2"><img src="http://payload79.cargocollective.com/1/8/260184/3895921/twittertest_o.jpg" width="20" height="18"/></a>
<a class="addthis_button_preferred_3"><img src="http://payload79.cargocollective.com/1/8/260184/3895921/google-_o.jpg" width="20" height="18"/></a>
<a class="addthis_button_preferred_4"><img src="http://payload79.cargocollective.com/1/8/260184/3895921/linked_o.jpg" width="20" height="18"/></a>
<a class="addthis_button_preferred_5"><img src="http://payload79.cargocollective.com/1/8/260184/3895921/xing_o.jpg" width="20" height="18"/></a>
<a class="addthis_button_preferred_6"><img src="http://payload79.cargocollective.com/1/8/260184/3895921/pin_o.jpg" width="20" height="18"/></a>
<a class="addthis_button_preferred_11"><img src="http://payload79.cargocollective.com/1/8/260184/3895921/favoriten_o.jpg" width="20" height="18"/></a>
<a class="addthis_button_compact"><img src="http://payload79.cargocollective.com/1/8/260184/3895921/Addthis_o.jpg" width="20" height="18"/></a>
</center>
b) Sharebar
<!-- AddThis Welcome BEGIN -->
<script type="text/javascript" src="//s7.addthis.com/js/250/addthis_widget.js#pubid=ra-50446bd70e559841"></script>
<script type='text/javascript'>
addthis.bar.initialize({'default':{
"backgroundColor": "#ffffff",
"buttonColor": "#cc6600",
"textColor": "#666666",
"buttonTextColor": "#ffffff",
"hideAfter": 10
},rules:[
{
"name": "AnyOther",
"message": "2bd1 is a global acting creative community to get things done, which are worth to be done.",
"action": {
"type": "button",
"text": "Share it",
"verb": "share",
"service": "preferred"
}
},
{
"name": "Twitter",
"match": {
"referringService": "twitter"
},
"message": "2bd1 is a global acting creative community to get things done, which are worth to be done.",
"action": {
"type": "button",
"text": "Tweet it!",
"verb": "share",
"service": "twitter"
}
},
{
"name": "Facebook",
"match": {
"referringService": "facebook"
},
"message": "2bd1 is a global acting creative community to get things done, which are worth to be done.",
"action": {
"type": "button",
"text": "Share on Facebook",
"verb": "share",
"service": "facebook"
}
},
{
"name": "Google",
"match": {
"referrer": "google.com"
},
"message": "2bd1 is a global acting creative community to get things done, which are worth to be done.",
"action": {
"type": "button",
"text": "+1",
"verb": "share",
"service": "google_plusone_share"
}
}
]});
</script>
<!-- AddThis Welcome END -->
Now, there are several more or less big problems
1. Problems with shown pages/projects regarding colums
If You enter a project of the right column, it opens analogue to the right side in a virtual virtual 4th column, so that the content is not shown on screen. THis problem is not given, when a project is opend in the first or second column
2. Problems with columns:
When entering first time on mobile the site rotates correctly in 3 colums. If you entering a page or project the first time on the third column and go back to overview, the site has problems and shows black virtual 4th column at the right side (think this is same problem like 1)
3. Problems to center HTML customization
On mobile, the extensions are not shown centered. The Icons and links are referencing a minor size of the mobile screen - i think it is the original programmed screensize (which is used without/before optimization "@media only screen" shown above)
4. Show Freshbar with one continuous fixed size on mobile
Is there a possabality to fix the (bigger) freshbar size continuously only on mobile while scaling the screen size
Thank you for your support
Andreas