Navigation
Archive / 7045 / center aligned design for mobile
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • August 28, 2016 at 7:48 am #1150428
    bak
    Participant

    Hi there, I use CSS to make sure that on mobile the design is center aligned.

    I have a tabls element with bullet points. How can I make sure that the bullets are left aligned?

    Thanks

    August 28, 2016 at 7:48 am #1150429
    bak
    Participant
    This reply has been marked as private.
    August 28, 2016 at 7:59 am #1150444
    Christian
    Moderator

    Hey Bak,

    You have this code in your CSS

    @media (max-width: 767px) {
body .h-custom-headline, body .x-column, body p {
    text-align: center !important;
}
}

    Please remove it.

    Thanks.

    August 28, 2016 at 12:09 pm #1150654
    bak
    Participant

    Hi there

    The thing is that I have this code because on mobile some of the headlines / texts are centered and some not.

    Is it possible to adress just specific columns or sections with bullet points but have the rest center aligned?

    August 28, 2016 at 1:40 pm #1150709
    Rupok
    Member

    Hi there,

    In that case; you can update the code to following :

    @media (max-width: 767px) {
body .h-custom-headline, body .x-column, body p {
    text-align: center !important;
}

.x-tab-content li {
  text-align: left!important;
}
}

    Hope this helps.

    August 29, 2016 at 4:08 am #1151392
    bak
    Participant
    This reply has been marked as private.
    August 29, 2016 at 4:15 am #1151399
    Paul R
    Moderator

    Hi,

    Please check in the following locations

    1. Custom > Edit Global CSS in the customizer
    2. wp-content/themes/x-child/style.css
    3. Cornerstone > Settings > Custom CSS

    http://screencast.com/t/VEddGxlY

    September 2, 2016 at 2:26 pm #1158835
    bak
    Participant
    This reply has been marked as private.
    September 2, 2016 at 6:45 pm #1159069
    Jade
    Moderator

    Hi there,

    Please add this code in the customizer:

    @media (max-width: 767px) {
    .x-text ul {
         text-align: left;
    }
}

    Hope this helps.

    September 3, 2016 at 8:06 am #1159653
    bak
    Participant
    This reply has been marked as private.
    September 3, 2016 at 10:54 am #1159764
    Thai
    Moderator

    Hi There,

    Please add the following CSS:

    .x-promo-content ul {
    margin-left: 17px;
}

    Hope it helps 🙂

    September 3, 2016 at 2:37 pm #1159891
    bak
    Participant

    Hi there

    I added the code but I do still see it center aligned

    September 4, 2016 at 12:10 am #1160235
    Christopher
    Moderator

    Hi there,

    please update previous code to :

    @media (max-width: 767px){
.x-promo-content ul {
    text-align: left;
}
}

    Hope it helps.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1150428 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>