By TKABE on Monday, 24 August 2015
Posted in General
Likes 0
Views 438
Votes 0
See the image attached for reference related to these three (3) questions:

Using the Chrome web dev - view responsive layouts:

A.) The responsive code for group avatars in media queries both 320x480 portrait and 480x320 landscape places the group title and url links as centered text along with the Avatar image. The Avatar image as a result, is covered by the url links and would be better positioned to the left.


1. Where is the code that needs to be changed to re-position the Avatar image on the left side of the group cover image for smaller media queries? See screen capture.

2. If I wished to float the group title rather than centering the text in the div - could you identify the code location required to make this change for smaller media queries? See screen capture.

3. The group title is truncated quite short. Where can I make this adjustment to allow the group title to be slightly longer over the group cover image?


B.) The small tablet media query does not show the group title, url links , group avatar and group cover image at all. While it is often a common technique to reduce the elements shown at various media queries, Since these elements are shown for smaller view ports, then they should also be shown for the small tablet view port. In addition, navigation is made more difficult as a result of this missing group title etc.

Where is the code located to add the missing div's mentioned in this question?



It would seem all four of these related question might make a good feature request as well, since the benefit is not just to my site rather all sites impacted by the responsive media queries.

Thank you in advance for your guidance.

Todd
Hi TKABE,
A.) The responsive code for group avatars in media queries both 320x480 portrait and 480x320 landscape places the group title and url links as centered text along with the Avatar image. The Avatar image as a result, is covered by the url links and would be better positioned to the left.

Your customization codes causing the title and url misplaced. If possible please remove it.
http://screencast.com/t/rXJD8Zmur


1. Where is the code that needs to be changed to re-position the Avatar image on the left side of the group cover image for smaller media queries? See screen capture.

e.g.:
body div#fd.es.w480 .es-header-mini .es-header-mini-avatar {
left: 50px;
top: 20px;
}
body div#fd.es.w480 .es-header-mini .es-avatar.es-avatar-md {
height: 40px;
width: 40px;
}


2. If I wished to float the group title rather than centering the text in the div - could you identify the code location required to make this change for smaller media queries? See screen capture.

body div#fd.es.w480 .es-header-mini .es-header-mini-body {
margin-top: 30px;
padding-left: 70px;
text-align: left;
}

3. The group title is truncated quite short. Where can I make this adjustment to allow the group title to be slightly longer over the group cover image?

The group title truncated is base on the viewport width.
http://screencast.com/t/QZRdqurmrVm
http://screencast.com/t/mY1x6K2h7SM

B.) The small tablet media query does not show the group title, url links , group avatar and group cover image at all. While it is often a common technique to reduce the elements shown at various media queries, Since these elements are shown for smaller view ports, then they should also be shown for the small tablet view port. In addition, navigation is made more difficult as a result of this missing group title etc.

Where is the code located to add the missing div's mentioned in this question?


Sorry but I don't quite get you here. Can you please elaborate more on this please? Those elements are shown in narrow view port.
·
Tuesday, 25 August 2015 13:57
·
0 Likes
·
0 Votes
·
0 Comments
·
Excellent reply! Stunning effort

Regarding your reply for item 3 - truncated Group title...in my full screen view the group title is already truncated, so it is truncated 100% of the time and not impacted by reducing the responsive view port size. Hope this helps to find the group title truncating code.

Regarding 3b - Working okay now....When I viewed the small tablet viewport a div was missing as noted in my description. Today - this is working correctly. I had not changed the code to hide the missing elements and had presumed it was a template issue.

Thank you!

Todd
·
Tuesday, 25 August 2015 15:06
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello TKABE,

For the truncated issues you can insert css codes below into your custom stylesheets.

body div#fd.es .es-header-mini .es-header-mini-meta .es-cover-title {
width: auto;
}
·
Tuesday, 25 August 2015 15:18
·
0 Likes
·
0 Votes
·
0 Comments
·
No problem Todd, I am glad that your issues are resolved now.
·
Tuesday, 25 August 2015 16:39
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post