Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 9, 2015 at 11:15 pm #500757
    jaroljmek

    Hello Guys!

    I’m really enjoying using full width fixed images with overlay text on this one page site but I’m wondering how far I can alter the responsive display on small screens:

    http://www.dandajaroljmek.com/

    Is it possible to tell the smaller screens to display the Colour Section Background Image above the Text Block in a similar way that you can when using Grid Rows (the Mobile Behaviour option)?

    Currently I have the nice fixed image effect on large screens but on small screens the text sits on top of the background images.

    Thanks so much! I know I can revert to a half width image using Grid Row but I would love to keep the full width image on Desktop.

    Best,

    Christian

    September 10, 2015 at 4:14 pm #501122
    Elliott

    Hey jaroljmek!

    It looks nice.

    I’m not really sure what you mean by this though.

    Is it possible to tell the smaller screens to display the Colour Section Background Image above the Text Block in a similar way that you can when using Grid Rows (the Mobile Behaviour option)?

    Can you take a screenshot and highlight exactly what your trying to do so we can get a better idea?

    Best regards,
    Elliott

    September 10, 2015 at 5:25 pm #501202
    jaroljmek

    Hi there Elliot,

    Thanks for the feedback!

    Here’s a tablet sized screenshot of the Homepage that uses a full width parallax image with text on top. The text sits covering the image:

    http://awesomescreenshot.com/0b25875gc9

    This page is a Desktop page using a Grid Row with a half page image:

    http://awesomescreenshot.com/0fe58765bf

    This is what happens to the Grid Row when you go to Tablet size. The image says separate to the text.

    http://awesomescreenshot.com/0b25875gc9

    My question is whether it’s possible to separate image and text in the same way at Tablet size when using a full width background as my homepage is currently set up:

    http://www.dandajaroljmek.com/

    I guess I want the best of both worlds here!

    Thanks very much,

    Christian

    September 11, 2015 at 2:20 pm #501643
    Andy

    Hey!

    not sure what you mean, because your first and third screenshot are exactly the same. Can you provide us a mockup showing what you want to achieve please?

    Cheers!
    Andy

    September 11, 2015 at 4:21 pm #501765
    jaroljmek

    Hey Andy really sorry about that. I mixed up the screenshots.

    This is the homepage I currently have:

    http://www.dandajaroljmek.com/

    The Tablet version looks like this:

    http://awesomescreenshot.com/04f58bfs25

    Here is a test page using a grid row:

    http://www.dandajaroljmek.com/home-scroll/

    The Tablet version looks like this:

    http://www.awesomescreenshot.com/0b25875gc9

    Is it possible to make my Homepage (the top link) reduce to Tablet size in the same way as the last link does i.e. with photo above text block?

    I hope that now makes sense!

    Best regards,

    Christian

    September 12, 2015 at 4:36 am #501941
    Ismael

    Hey!

    I’m sorry but it’s not possible because the text on the column containing the text is actually inside the color section. You need to setup the page the same way you did here: http://www.dandajaroljmek.com/home-scroll/

    OR

    You can hide the text column on mobile view. Add another color section after the existing one, add the same text. Use css media queries to show or hide a specific element on different screen sizes. Example: https://kriesi.at/support/topic/how-to-hide-some-elements-in-mobile-version/#post-362263

    Best regards,
    Ismael

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