[Resolved] Mobile View centering

Home Forums Support [Resolved] Mobile View centering

Home Forums Support Mobile View centering

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #248644
    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

    #248678
    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.

    #248681
    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

    #248682
    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.

    #248791
    Tom
    Lead Developer
    Lead Developer

    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/

    #248829
    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

    #248840
    Tom
    Lead Developer
    Lead Developer

    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/

    #1303252
    urs

    sloved. thanks

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.