Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 3, 2017 at 2:31 pm #833902
    Septura

    Hello,
    I would like to make the desktop version of my site non-responsive (basically I want to keep the dimensions absolute on the desktop version). However, I would still like to keep the mobile/tablet versions. Is there a way of achieving this?
    Thanks!

    • This topic was modified 7 years, 3 months ago by Septura.
    August 5, 2017 at 6:25 am #834593
    Rikard

    Hey Septura,

    That is basically how it works by default since you can set the container width in the Theme Options under General Layout->Dimensions. If that is not what you are looking for then please try to explain a bit further and link to an example of what you are trying to achieve.

    Best regards,
    Rikard

    August 5, 2017 at 9:33 am #834658
    Septura

    Thanks. It looks to me like you can set the maximum container width there, but no minimum. So it’s still responsive rather than absolutely fixed.

    To be clearer about what I want: I have a few pages like this http://development.septura.org/about-us/ with an image on the left and a block of text on the right. I’d would like to make it so that the image is always the same height as the text block (without any white space below it). At a certain window height and width this is achieved. But when the window becomes too narrow (but with the same height) the container re-sizes so that the image becomes smaller, with a gap underneath.

    If I turn the mobile site off (i.e. make the site non-responsive) then I can fix absolutely the sizes. However, obviously then I lose the mobile site, which I don’t want to do.

    August 10, 2017 at 10:40 am #836893
    Rikard

    Hi,

    Sorry for the late reply. I understand what you are trying to do but that can be very difficult to achieve unfortunately, I think your best bet would be to have the image set as a background image in the column. Could you try that out maybe?

    Best regards,
    Rikard

    August 10, 2017 at 1:08 pm #836946
    Septura

    Thanks Rikard.

    I’ve tried that, but I’m afraid it doesn’t seem to have worked. If the image is a large size then it doesn’t display the full width, and if it’s a smaller size then it’s not tall enough (so there is the same problem as before).

    Is there a way of fixing the height of the left-hand column? Or maybe making that column disappear once the page gets too narrow (at which point there will be the white space under the image)?

    August 11, 2017 at 6:59 am #837323
    Rikard

    Hi,

    Yes, you can set the 1/3 element to not display on mobile devices in the Screen Options tab in the element options.

    Best regards,
    Rikard

    August 11, 2017 at 10:08 am #837363
    Septura

    The change to mobile happens after the image as already become too small though. Can you make it the 1/3 element disappear at a custom point?

    Just fixing the height and width of the 1/3 element (or the image within it) would be preferable.

    August 12, 2017 at 7:48 am #837777
    Rikard

    Hi,

    Try this in Quick CSS:

    @media only screen and (max-width: 767px) {
.page-id-17 .av_one_third {
  display:none !important;
}
}

    Change the pixel value to your liking.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.