[Resolved] Mobile View centering

[urs]

Im almost done with the Design. The only 2 things left i can’t handle myself are:

– Desktop view: Category Box is too much left
view here: http://www.sandbox.philippinen-blog.ch/category/technik/

– Mobile View: Content (articels) are sticky on the right side (Android, Apple)
take link above an smaller our browser to Mobilescreen size

I have made a view CSS changes with Simple CSS:

++++++++++++++++++++++++++++++++++++++++++++++

.footer-widgets {
background-color: #dd9933;
opacity: 0.8;
color: #5e5e5e;
}

.sidebar .widget {
background-color: #dd9933;
opacity: 0.8;
color: #5e5e5e;
}

.entry-title {
margin-bottom: 0;
text-align: center;
}

.entry-meta {
font-size: 85%;
margin-top: 0.5em;
text-align: center;
}

.entry-summary {
margin-bottom: 0;
text-align: center;
}

.widget-title {
font-size: 30px;
margin-bottom: 30px;
border-bottom: 2px solid #000;
}

.masonry-enabled .page-header {
position: relative !important;
}

.no-sidebar .masonry-post .inside-article, .no-sidebar .masonry-enabled .page-header {
border: 1px solid #DD9933;
margin: 0 0 0 20px;
}

.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .separate-containers .inside-page-header {
background-attachment: local;
border: 1px solid #DD9933;
}

.essb-subscribe-form-content.essb-subscribe-from-design1 {
background-color: #dd9933 !important;
opacity: 0.8;
}

++++++++++++++++++++++++++++++++++++++++++++++

Would be very much happy if you have a quick overlook.
Many thanks
Urs

[Sebastian]

Hallo Urs,

ich antworte mal auf deutsch. Das ist ein ganz schönes Durcheinander mit den Abständen. Auch das Menü ist nicht sauber ausgerichtet.

Zu Punkt 1:

Du musst noch etwas Margin per CSS hinzufügen:

.separate-containers .page-header { margin-right: 2px !important; margin-left: 20px !important; }

Zu Punkt 2:

Da musst du Media Queries nutzen:

@media screen and (max-width: 768px) {
    .separate-containers .page-header { margin-right: 10px !important; margin-left: 10px !important; }
    .no-sidebar .masonry-post .inside-article { margin-right: 10px !important; margin-left: 10px !important; }
}

Das sollte das Gröbste erstmal beseitigen.

[urs]

wow, das ging ja schnell. danke dir Sebastian.
Die Box ist mit deinem CSS zwar zentriert, aber unten ist der abstand weg bzw. “klebt” die box am Artikel.
Habs jetzt mal so abgespeichert…
Danke für deine Zeit

[Sebastian]

Ich habe den Code noch ein paar mal korrigiert. Schaue noch mal über mein CSS drüber. Ich habe jetzt links und rechts extra angesprochen. So sollte es gehen.

Achso, die Media Queries bitte ans Ende der CSS-Datei setzen.

[Tom]

The next version of GP Premium improves the spacing around elements using masonry and columns.

If you’d like to test it out for me, feel free to get in touch: https://generatepress.com/contact/

[urs]

Hi Tom
I’m sorry the above replies are in german 😉 think you may get some out of the disccusion?
If not: all my requests are solved with the CSS from “the Hero” Sebastian. Huge thanks here to you Sebastian, this is what i call great support!!

Now i’m on track way to go life the next days.

Thanks for your offer to try the new Version and yes, i will be glad to test it out. Just let me know your conditions and where i get the DL.

Thnaks
Urs

[Tom]

Awesome! Glad you got it all sorted 🙂

The next version should take care of all that spacing stuff for you.

If you’d like it, feel free to contact me and I’ll send it over: https://generatepress.com/contact/

[urs]

sloved. thanks

[Author]

Posts