Hey Folks!

During April & May of 2020, answers may be delayed more than it usually happens. This is caused by my personal situation that requires a lot of time from me to be dedicated elsewhere, and also because of the local things that are happening currently cause of the all things connected to "Corona Virus".

Please be patient, all answers are coming as soon as possible :-)

Sorry for any inconvenience.

Air.
Before you ask please READ THIS

Improve Slider View on mobile (smaller than 650px)

edited June 2013 in Hypershot Posts: 40

Hi Air,
while checking my page on a friends phone I had to see a, well, "interesting" layout of my slider hompage:
https://quirktools.com/screenfly/#u=http%3A//ailoone.com&w=320&h=568&a=37

Now I have a question: Is it possible to
- disable this (removing the @media .... 650px section in style css is not enough :( )
or
-change the height/width of the tiles to a e.g. 1/4 ratio (maybe a custom picture size --> no problem with the "Simple Image Sizes" plugin)!

Would be GREAT, for I want my page to look as great on a phone as on the desktop!!
Regards,
Max

Post edited by macmacs on

Comments

  • AirAir
    Posts: 10,338
    Hello there:-)
    macmacs said: disable this (removing the @media .... 650px section in style css is not enough :( )
    or
    And what should be result after disable?
    macmacs said: change the height/width of the tiles to a e.g. 1/4 ratio (maybe a custom picture size --> no problem with the "Simple Image Sizes" plugin)!
    I don't quite get this solution. Play with width of browser window and you will see responsivnes also. Please present on screen shot what you imagine to see as result on resolutions lower then 650px.

    With regards.

  • Posts: 40
    Hi Air,

    my basic concern is, that my page looks weird on the iPhone (Attachment 1).

    I imagine a solution, which

    - disables this vertical stacking of the 5 tiles (and displays the "normal" page, attachment 2)

    or

    - renders the tiles not in 3:1 ration but 1:3 or some similar landscape format in a way, that the titles are visible and the user sees, that there are more categories.

    What do you think? Is it possible?
    My solution would be to add a picture size and add it to js/css for mobile (yeah, it's not 100% responisve any more ...)

    Greetings,
    Max
    Unbenannt.PNG
    335 x 511 - 347K
    Unbenannt2.PNG
    984 x 630 - 819K
  • AirAir
    Posts: 10,338
    Hi there

    Partly I don't understand your solution and partly I don't like it as I know all the limitations it generates.
    Your images are a bit special case, and it is not easy to deal with it. If we start to squeeze them they will look worse. I were on your site on iPhone and I like current solution as pressing arrows move you to next one.

    Ehhh I have just checked is there any good solution that can be quickly added in that case and there is not, as we compute a lot there with JavaScript.

    One solution I think of is altering of content. What I mean is, if you really think about responsivnes of your site then you will have to alter some content so it will be proper. If you put different images as covers of your albums(images that have more "square" proportions) then it will look much better. However I like very much what you have now, so it will be bit of loose...
    :-)

    This is hard case:-)

    With regards.
  • Posts: 40
    Hmm, OK. For now, I am ok with the design at mobile devices. But I guess, i have to find a way around it :) Changing the aspect ration of my tiles is NOT an option.

    I come back to you when I have the time to solve the "problem".
    Regards
    Max
  • AirAir
    Posts: 10,338
    OK, let it be this way.

    With regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion