Display issues on mobile devices

Tagged: mobile devices

This topic has 13 replies, 2 voices, and was last updated 8 years, 4 months ago by Tinus53.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
July 23, 2016 at 3:48 pm #95958

Tinus53
Participant

Hi,
there are two issues on mobile devices.
1. Logo distorted.
2. Sidebar cut off on the left. Seems that is is to wide.

Is there a way to aviod this issues?
http://sf-plochingen.schachvereine.de/sfp2

Regards
Bernhard

July 23, 2016 at 5:32 pm #95961

Pratik
Participant

You are using a lot of CSS in Custom CSS box. Can you try removing them and seeing if the problem persists.

July 23, 2016 at 6:46 pm #95970

Tinus53
Participant

Hi Pratik,
I deleted all my css stuff.

Problem #1 persits.
Problem #2 does no longer exist.

Problem #1 seems to be part of the theme.
Problem #2 is caused by this css:
.two-columns #secondary {
width: 375px;
}
This is to reduce the width of the sidebar, so that it fits to the width of the 3rd widget area in the footer. Maybe you have another idea how to meet this requirement.

May be that this is not the best way to increase the Content area, but it works.
#primary {
width: 770px;
}
Do you have a better suggestion?
I omitted both css-snippets for the moment.

Regards
Bernhard

July 24, 2016 at 10:05 am #95992
Pratik
Participant
Hi @Tinus53,

Problem #1:
Can you try following CSS code for distorted logo:
```
#branding img {
    max-height: none;
}
```
Problem #2:
For this, what you can do is decrease the size of this area for larger screens only so that mobile views do not get affected. To do this, add in following CSS code:

@media screen and (min-device-width: 783px) {
.two-columns #secondary {
width: 32%;
}

/* Remove this block if you do not want to increase content size */
#primary {
width: 66%;
}
/* Remove block End */
}

If you increase content area, then you will remove responsiveness in mobile devices.

Let me know how it goes.

Regards,
Pratik
July 24, 2016 at 12:21 pm #96001

Tinus53
Participant

Hi Pratik,
#1 works perfect!!!!!
I used this CSS to adjust the sitetitel more centered to tho logo.
#site-details {
margin-top: 40px;
margin-left: 20px;
}
But causes that on mobile devices that space between logo and Sitetitel increases.
Is there another way get the same result without effecting mobile devices?

#2 is more an optical issue. May be not for you, but for me 🙂
Your suggestion works on my mobil phone, but not on my desktop computer when I’m working not in full screen mode (small browser window).

Of course, I don’t want to loose responsiveness in mobile devices!
I hope that there is another way to change the width of content and sidebar area. My goal is to have the content area same width as the both widget areas in the footer and the sidebar should fit to the 3rd widget area in the footer.

Regards
Bernhard

July 26, 2016 at 11:27 am #96058

Tinus53
Participant

No more suggestions?

July 26, 2016 at 11:37 am #96059

Pratik
Participant

I thought you solved the issue. Can you let me know with reference to a screenshot in what exactly you need, because it looks fine to me on my screen. Maybe it is screen specific issue. Also, let me know your screen resolution.

July 26, 2016 at 11:55 pm #96090

Tinus53
Participant

Hi Pratik,
issue #1 is solved.

Issue #2 is still open. This are optical issues only, but I would be really satisfied if we can solve this.
#2.1 I tried to adjust the sitetitel more verticaly centered to tho logo with this css code:
#site-details {
margin-top: 40px;
margin-left: 20px;
}
This works perfect on my Desktop Computer, but looks not so nice on mobile devices because the space between logo and Sitetitel increases too much.
Is there another way centering the Sitetile verticaly without effecting mobile devices?

#2.2 My next goal is to increase the content area to same width as the both widget areas in the footer and the sidebar should fit to the 3rd widget area in the footer. Hope you understand what I mean 🙂
Of course, I don’t want to loose responsiveness in mobile devices!
I hope that there is convenient way to change the width of content and sidebar area. If I can solve this only by using a child-theme that might be ok. I think that I have to adjust the Basic Settings for this Areas. But how or where?

My Screen Resolution is 1920×1080, very normal LCD-Display.

Regards
Bernhard

July 27, 2016 at 1:18 pm #96106
Pratik
Participant
Can you try following CSS code and let me know how it goes:
```
@media screen and (min-device-width: 990px) {
    #site-details {
        margin-top: 40px;
        margin-left: 20px;
    }
}
```
July 27, 2016 at 2:29 pm #96108

Tinus53
Participant

Hi Pratik,
works great!!

Any idea hows to meet #2.2 changing the width of Content and sidebar area?

Regards
Bernhard

July 27, 2016 at 2:35 pm #96109
Pratik
Participant
The one I provided earlier should work:
```
@media screen and (min-device-width: 783px) {
    .two-columns #secondary {
        width: 32%;
    }

    /* Remove this block if you do not want to increase content size */
    #primary {
        width: 66%;
    }
    /* Remove block End */
}
```
You can work around with the % till you want the desired sizes.

Let me know if this is what you wanted?
July 27, 2016 at 5:09 pm #96116

Tinus53
Participant

Hi Pratik,
yes, this is what I wantet. It works well on my Desktop Computer but not on some mobile devices. You mentioned earlier that I will loose responsivness on mobile devices and I think you are right!
Are there no global Settings for the width of this area?
Someting like content-size: xxxx px or so?

Regards
Bernhard

July 28, 2016 at 10:24 am #96159

Pratik
Participant

@Tinus53: I am afraid there is no global setting. Content and sidebar width are main components so once they are changed, all the CSS needs to be updated for responsiveness as well.

July 28, 2016 at 12:11 pm #96170

Tinus53
Participant

Hi Pratik,
ok, I understand.
Thank you for your assistance and your patience.

Have a nice day.
Greetings from Germany.
Bernhard
Author

Posts