Grid Size Adaptation

Million Dollar Script Forums General Grid Size Adaptation

This topic contains 8 replies, has 2 voices, and was last updated by  Ryan 2 years, 8 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #2198

    main_body
    Participant

    With a grid width of 1500 px, the grid pops out of the right side of the layout, whenever the website is viewed from a mobile device or a (for example) square screen that doesn’t seem to be able to view the whole grid image within the layout.
    Is there any way to add some code or some properties, so that the whole width of the grid and the corresponding layout won’t be ‘destroyed’ or is even adjusting to the viewer’s screen?

    #2199

    Ryan
    Keymaster

    Well you maybe could set the iframe and the image in it to 100% width and that might work but there might be some borders, padding or margin you would have to accommodate for or remove. However if you make the image responsive it might be hard to see on a small screen.

    I’m not sure if that’s what your issue is though or not. Do you have a link where I can see it?

    #2200

    main_body
    Participant

    Yes, sure.
    It’s http://www.yourpixel.net
    On a big screen you can see the whole grid, on a small screen, it kinda explodes out of the right side.

    • This reply was modified 2 years, 8 months ago by  main_body.
    #2202

    Ryan
    Keymaster

    The header seems to not be contained properly but I’m not sure yet why. Will have to investigate more and see.

    For the grid itself I probably will have to write some js to auto resize the elements to match the width of the screen. However this might not be necessarily the desired effect for everyone so it will have an option to toggle it in the config.

    #2203

    main_body
    Participant

    Yes, maybe this is because I am currently trying different things to edit the style of the top-/logo- and buttons section above the grid in the main.css file. Just experimenting cuz I never really dealt advanced with html&css before and so on and I’m not finished yet.

    Well, that would be a pretty cool update to my mind, also if the top section, where the logo and all the buttons are placed would resize to match the width of the screen.

    #2233

    main_body
    Participant

    Maybe theres also a way to check the screen size via php and thus let another main.css file, which is adapted to 1000px width screens, load or so, idk

    #2234

    Ryan
    Keymaster

    If you want to use different styles for different screen sizes you could look into CSS media queries and add those to your main.css file.

    #2235

    main_body
    Participant

    Yes, I’ll do that. Otherwise IF you intend writing this js stuff to have an extra config option, I’d appreciate if you’d let me know.
    Regards, T

    #2236

    Ryan
    Keymaster

    The css media queries is probably actually the better way to go I would think. They both would basically do the same thing, adjust the styles when the screen resizes. I may set that up and add a config option to toggle it when I get a chance since it might be good to have anyway in MDS 3.0 (WordPress plugin).

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.