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

XF 1.3 Another Responsive Image Questions

Discussion in 'Styling and Customization Questions' started by Chimpie, Aug 24, 2014.

  1. Chimpie

    Chimpie Well-Known Member

    I did some searching around and read a couple of posts, and think my issue will be solved with adding some CSS or Class information, but I haven't figured out what exactly to add.

    I'm attempting to place an image in the notices box (this image is just for testing) but adding the 'width 100%' is making the image huge in the desktop browser. This is the code I've used:
    Code:
    <center><img src="http://www.chimpie.com/files/emtlife/emtlifeadbanner728x90.jpg" style='width:100%;' /></center>
    I need the image to be whole in both portrait and landscape mode on phones and tablets, but I want it to be normal size (728 wide) (not enlarged) when viewed on a desktop.

    Suggestions?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Try max-width: 728px.
     
  3. Chimpie

    Chimpie Well-Known Member

    Replacing 'width:100%' or adding that to the above code?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Replace width:100% with max-width: 728px.
     
  5. Chimpie

    Chimpie Well-Known Member

    That keeps it from being larger than 728, but now the image is cut off on smaller resolutions (smartphone).

    Code:
    <center><img src="http://www.chimpie.com/files/emtlife/emtlifeadbanner728x90.jpg" style='max-width:728px'; /></center>
     
  6. Chimpie

    Chimpie Well-Known Member

    The only thing I can think of doing is a bunch of 'ifs' to make it work.
     
  7. Brogan

    Brogan XenForo Moderator Staff Member

  8. Chimpie

    Chimpie Well-Known Member

    Yeah, I found that earlier and still trying to decipher it for my use.

    So this is what I came up with and it's not working. I added the following in extra.css:
    Code:
    .noticeimage
        @media (max-width:@maxResponsiveWideWidth)
            {
                text-align: center; max-width: 100px;
            }
        @media (max-width:@maxResponsiveMediumWidth)
            {
                text-align: center; max-width: 100%;
            }
        @media (max-width:@maxResponsiveNarrowWidth)
            {
                text-align: center; max-width: 100%;
            }
    And then for my notice:
    Code:
    <xen:if is="@enableResponsive">
    <p class="noticeimage"><img src="http://www.chimpie.com/files/emtlife/emtlifeadbanner728x90.jpg" style='max-width:728px'; /></p>
    </xen:if>
    How far off am I?
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

    You need to create a class and use that in the media queries and your code.

    Instead of style='max-width:728px'; you should have class="myClass" then use myClass in the queries.
     
  10. Chimpie

    Chimpie Well-Known Member

    Yeeeeaaahhh... that's what I thought I did. #ugh
     
  11. Chimpie

    Chimpie Well-Known Member

    Can you elaborate on this part?
     
  12. Brogan

    Brogan XenForo Moderator Staff Member

  13. Chimpie

    Chimpie Well-Known Member

    Brogan, I appreciate your help, I really do, but I'm going to outsource this as well. I'm going on two and a half hours and I still can't figure this out.

    When it comes to coding like this, I learn by seeing why something worked, not by trial and error. You are a great resource and all of the xenforo customers are blessed to have you.
     
  14. Brogan

    Brogan XenForo Moderator Staff Member

    Code:
    .noticeimage
    {
        max-width: 728px;
    }
    
    <xen:if is="@enableResponsive">
        @media (max-width:@maxResponsiveWideWidth)
        {
            .noticeimage
            {
                text-align: center;
                max-width: 100px;
            }
        }
    
        @media (max-width:@maxResponsiveMediumWidth)
        {
            .noticeimage
            {
                text-align: center;
                max-width: 100%;
            }
        }
    
        @media (max-width:@maxResponsiveNarrowWidth)
        {
            .noticeimage
            {
                text-align: center;
                max-width: 100%;
            }
        }
    </xen:if>
    
    Code:
    <p><img src="http://www.chimpie.com/files/emtlife/emtlifeadbanner728x90.jpg" class="noticeimage" /></p>
    I have used your code but the medium and narrow do the same thing.
     
    Chimpie likes this.
  15. Chimpie

    Chimpie Well-Known Member

    Thanks for continuing to help. On portrait it looks fine...
    portraitad.png

    .. but landscape ad does this..
    landscapead.png
     
  16. Chimpie

    Chimpie Well-Known Member

    Okay... part of the problem solved. Under the WideWidth it was 100px not 100%. That seemed to fix it.

    The only issue now is that it's not centering.
     
  17. Brogan

    Brogan XenForo Moderator Staff Member

    I'm on my tablet so I can't check but you may need to add the center code to the parent div/p.
     
  18. Chimpie

    Chimpie Well-Known Member

    Soooo, I did this:
    Code:
    /* *** Notice Image *** */
    .noticeimage
    {
        width: 100%;
        max-width: 728px;
    }
    
    And for the notice text:
    Code:
    <p align="center"><img src="http://www.chimpie.com/files/emtlife/emtlifeadbanner728x90.jpg" class="noticeimage" /></p>
    In my desktop browser the image in center and sized fine.
    On my phone in portrait and landscape the image is sized fine, but not centered.

    I've tried your CSS code above w/ and w/o the p align center and on my phone it still isn't centered.
     

Share This Page