1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 How to edit the text padding/aligment or font size in message content (of responsive layout only)?

Discussion in 'Styling and Customization Questions' started by Vince Chiu, Nov 28, 2013.

  1. Vince Chiu

    Vince Chiu New Member

    How to edit the text padding/aligment or font size/ color in message content (of responsive layout only)?

    I was thinking add the following code in EXTRA.CSS, but it didn't work...please help...

    @media (min-width: @maxResponsiveMediumWidth) {

    .messageInfo primaryContent .message .messageContent {padding-left: 2px;}

    }
     
  2. Adam Howard

    Adam Howard Well-Known Member

    It can actually be done a lot simpler and easier just editing the style properties.
     
    Shelley and Amaury like this.
  3. Vince Chiu

    Vince Chiu New Member

    thanks adam
    which template should i look into?
    and i only wanna edit the padding and font size of the message content of the responsive layout/ mobile reading situation
    on the left handside the text isn't aligned with the upper element
    on the right handside the text aligned with the upper element (that's what i want)

    [​IMG]
     
  4. Shelley

    Shelley Well-Known Member

    You could do that in EXTRA.CSS template.
     
  5. Vince Chiu

    Vince Chiu New Member

    Sorry Shelley, i am not familiar with CSS
    what code should i put into it?
     
  6. kontrabass

    kontrabass Well-Known Member

    For future google searchers, this is what I put into extra.css to get rid of the message text padding and make it line up like in the screenshot. Need every pixel of screen space on mobile!

    Code:
    <xen:if is="@enableResponsive">
     @media (max-width:@maxResponsiveWideWidth) {
            .message .messageInfo {
            padding: 0px 0px !important;
            }
        }
    </xen:if>
    
     

Share This Page