Grid Row mobile behaviour

Dear Andy

thank you for your reply. The problem is that this fixes not all responsive problems (maybe I do not understand how to do…).

1. gridrows have to be optimized for different screen sizes. As example three popular sizes for optimisation

768 x 1024
414 x 736
360 x 640

of course these displays could be turned and the values switches. If I use from – to values like in your example size is not every time correct. I put know for some popular sizes a one css value in our style:

#gridrowservicewebcast {
  max-width: 910px;
  padding: 0 0px;
  margin: 0px auto;
}

@media only screen and (width: 732px){
#gridrowservicewebcast {
width: 622px;
}}

@media only screen and (width: 412px){
#gridrowservicewebcast {
width: 352px;
}}

@media only screen and (width: 568px){
#gridrowservicewebcast {
width: 482px;
}}

@media only screen and (width: 414px){
#gridrowservicewebcast {
width: 352px;
}}

@media only screen and (width: 736px){
#gridrowservicewebcast {
width: 627px;
}}

@media only screen and (width: 360px){
#gridrowservicewebcast {
width: 308px;
}}

@media only screen and (width: 640px){
#gridrowservicewebcast {
width: 546px;
}}

@media only screen and (width: 320px){
#gridrowservicewebcast {
width: 274px;
}}

2. If there is no other solution with time it is a lot of code in our css style because I have to to that for every grid row we use, we use a multisite installation so there is at the end a lot o code.

Is there a way to create a general responsive style for grid rows? Or a way for example for this gridrow to reduce and combine css code with this values?

Thanks for your effort and your general good support work

Marc

Dear Andy

I knew that this was wrong css handling. But I had probplems to do it better to avoid different width of the gridrow in different display sizes. Best working solution is now:

#gridrowservicewebcast {
  max-width: 910px;
  padding: 0 0px;
  margin: 0px auto;
}

@media only screen 
  and (min-device-width: 990px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
#gridrowservicewebcast {
   min-width: 682px;
   max-width: 1010px;
   padding: 0 50px;
}}

@media only screen 
  and (min-device-width: 780px) 
  and (max-device-width: 989px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
#gridrowservicewebcast {
  max-width: 702px;
  padding: 0px 10px;
}}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 779px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
#gridrowservicewebcast {
  max-width: 89.5%;
  padding: 0px 10px;
}}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
#gridrowservicewebcast {
   max-width: 85%;
   padding: 0px 0px;
}}

works now on this page https://service.l-mobile.com

Regards Marc

• This reply was modified 7 years, 11 months ago by L-mobileGroup.