[Tinus53]

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

[Pratik]

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

[Tinus53]

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

[Pratik]

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

[Tinus53]

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

[Tinus53]

No more suggestions?

[Pratik]

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.

[Tinus53]

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

[Pratik]

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;
    }
}

[Tinus53]

Hi Pratik,
works great!!

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

Regards
Bernhard

[Pratik]

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?

[Tinus53]

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

[Pratik]

@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.

[Tinus53]

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

Have a nice day.
Greetings from Germany.
Bernhard

[Author]

Posts