Style not applied on mobile

Good day to everyone,
I am a newbie and I have managed to add some css to this page : databoy.space/iz40/ . You can see if you login: databoy.space/login/ . You can use username : [Removed by staff] and password: [Removed by staff] . The problem is on mobile phones the avatars are no longer round and the divs are no longer styled, But Why??

  • Nithin
    • Support Wizard

    Hi Schmirts,

    Hope you are doing good today. :slight_smile:

    Could you please enable support access, so that we could give a closer look, whether this style change is implemented through your theme, or not. If not, we'll have to implement custom CSS. Please do note that, we don't recommend sharing user credentials through this public forum, you can always grant access from WPMU DEV > Support > Support Access > Grant Access, or check this manual: http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Could you please try the following CSS:

    @media screen and (max-width: 480px) {
      .widget.buddypress ul.item-list img.avatar {
    
        border-radius: 18px;
    }
    
    div#inbox {
        background-color: #e0e0eb;
        color: grey;
        padding-left: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
        width: 100%;
    }
    
    }

    You can add the above CSS code, using Custom CSS box(if your theme offers), or either using a Child theme, or a plugin like Simple Custom CSS.

    Kind Regards,
    Nithin

  • Rupok
    • Support Ninja

    Hi Schmirts,

    I went to this page but that page seems to be opening inbox div with 100% width in mobile view. The CSS property declaration also reflects that inbox div will be shown with 100% width in mobile viewpoints. Please check the attached screenshot for reference.

    Am I missing something there? If yes, can you please point that so we can see the issue live and give you proper custom CSS code to fix that?

    I'm looking forward to hearing from you and resolve this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

  • Schmirts
    • Site Builder, Child of Zeus

    If you see the page right now, I am using this css;

    div#inbox {
      background-color: #e0e0eb;
      color: grey;
      padding-left: 20px;
      padding-top: 5px;
      padding-bottom: 5px;
      height: 40px;
      width: 100%;
    }
    img#inbox-icon {
        float: right;
        margin-top: 0;
        padding: 0;
    }
    p#mklabels {
        float: left;
        width: 80%;
        margin-right: 0px;
        padding-right: 0px;
        margin-top: 0px;
        padding-top: 0px;
    }
  • Nithin
    • Support Wizard

    Hi Schmirts,

    Hope you are doing good today. :slight_smile:

    Could you please replace the following CSS, and check whether it helps:

    @media screen and (max-width: 480px) {
    
    div#inbox {
        background-color: #e0e0eb;
        color: grey;
        padding-left: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
        height: 40px;
        width: 114%;
        margin-left: -6%;
    }
    }

    The above CSS should make the div stick to the edges. Please let us know how that goes, so that we could give a closer look, if needed. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Nithin
    • Support Wizard

    Hi Schmirts,

    I guess you are talking about this page, you could try the following, and check whether it works:

    @media screen and (max-width: 480px) {
    
    #content_TesseractTheme {
        padding: 0;
    }
    }

    If the above didn't work, you'll have to add !important , ie padding: 0 !important;.

    However the use of !important declaration is not something which I would recommend, but in some cases's it would be necessary to apply these rules to overwrite the existing styles.

    Please let us know how that goes, have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Schmirts
    • Site Builder, Child of Zeus

    Sorry Nithin , I thought the problem was with the css you gave me but it's actually because I cant get the image to sit in the right place. If you look at the image above there is an icon that sits at the far right of the div, why cant I get it work?? here's my code:

    div#inbox {
      background-color: #e0e0eb;
      color: grey;
      padding-left: 20px;
      padding-top: 5px;
      padding-bottom: 5px;
      height: 40px;
      width: 100%;
    }
    img#inbox-icon {
        float: right;
        margin-top: 0;
        padding: 0;
    }
    p#mklabels {
        float: left;
        width: 80%;
        margin-right: 0px;
        padding-right: 0px;
        margin-top: 0px;
        padding-top: 0px;
    }
  • Nithin
    • Support Wizard

    Hi Schmirts,

    If you look at the image above there is an icon that sits at the far right of the div, why cant I get it work??

    Not sure whether I quite get you here, could you please try the following CSS, instead of the above code, and and check whether it works fine:

    @media screen and (max-width: 480px)
    div#inbox {
        background-color: #e0e0eb;
        color: grey;
        padding-left: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
        height: 40px;
        width: 100%;
    }
    
    img#inbox-icon {
    	margin-top: 8.1%;
    }
    
    #content_TesseractTheme {
        padding: 0;
    }
    }

    Please advise, if I had missed out anything. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Kasia Swiderska
    • Support nomad

    Hello Schmirts,

    Please see our policy about custom coding http://premium.wpmudev.org/manuals/using-wpmu-dev/support-vs-custom-development/ - as we are happy to help with some minor CSS changes that can be done in 5-10 minutes, in this thread we extended that time.

    If you need custom theme design I can suggest checking Job & Pros board https://premium.wpmudev.org/wordpress-development/ - this is right place to look for theme developer.

    If you want to remove that margin on mobile, then use that code:

    @media (max-width: 400px)
    div#inbox {
        width: 100% !important;
    }

    other than that margin, it looks fine on mobile:

    kind regards,
    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.