Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 1, 2014 at 6:20 pm #360923
    maastrichtuniversity

    Hi,

    The following page:

    maastricht-students.com/students-from/belgium/

    Created in our student site is only responsive to about 650 px in Firefox. Not sure why, but at that point everything stops responding and the images in the portfolio grid go very large and blurry and run off the page, along with the video at the top.

    Not sure what I’m doing wrong here, as all other pages seem to be fine. Also this page works OK in Chrome and Safari. It’s just in Firefox.

    Cheers,

    Atticus

    December 1, 2014 at 9:22 pm #361053
    Elliott

    Hi maastrichtuniversity!

    Can you send us a WordPress login so we can take a closer look?

    Regards,
    Elliott

    December 2, 2014 at 10:25 am #361365
    maastrichtuniversity
    This reply has been marked as private.
    December 2, 2014 at 8:07 pm #361732
    Elliott

    Hey!

    It looks like it’s only happening in Firefox, is that correct? Try adding this to your custom CSS.

    .avia-image-container-inner, .avia_image, .av-image-caption-overlay { width: 100% !important; }

    Cheers!
    Elliott

    December 3, 2014 at 3:08 pm #362128
    maastrichtuniversity

    Hi,

    I tried the CSS, and it worked but it also didn’t work. If you’ll look at:

    http://maastricht-students.com/students-from/belgium/

    The “Welcome text” image and the actual text in the top row occupy half the row. They should remain side by side until the browser window is almost at mobile size. Instead, at the certain point around ipad size, the small “Welcome text” image is stretched from 238px × 290px to 649px × 791px. Why, when the image is only 290px wide and occupies only 1/4 of a row, does this happen?

    I am creating very large welcome text images, but this is also a bit strange, since the “Welcome text” image and the actual text beside it are meant to be together until the screen is around mobile size.

    Maybe there’s a work-around for this. Not sure, but worth it to check.

    Thanks, Atticus

    December 3, 2014 at 10:35 pm #362544
    Elliott

    Hey!

    Try this instead.

    @media only screen and (max-width: 767px) {
.avia-image-container-inner, .avia_image, .av-image-caption-overlay { width: 100% !important; }
}

    And then play around with the 767px value until it looks good.

    Best regards,
    Elliott

    December 4, 2014 at 1:52 pm #362836
    maastrichtuniversity

    I gave it a try. Didn’t seem to make much of a difference. I lowered the max-width and the only difference was that then the image was covered up by the more narrow screen a bit.

    December 4, 2014 at 7:55 pm #363184
    Elliott

    Hi!

    Hmm, it seems to be working fine on my end now. Take a screenshot and highlight what your seeing so we can get a better idea.

    Also be sure to clear your browser cache and view in a different browser.

    Cheers!
    Elliott

    December 10, 2014 at 9:58 am #365879
    maastrichtuniversity

    Hi again,

    It looks better because I changed the layout. The title was an image in Avia and I put it in with a text block and html instead in order to keep it at a manageable size. Not ideal but it works :)

    This one can be closed. Many thanks for the excellent support.

    Atticus

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Some pages in Enfold not responsive…’ is closed to new replies.