General
Grid Size Adaptation
Started January 7, 2015 by main_body
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?
8 replies
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?
Yes, sure.It's www.yourpixel.netOn a big screen you can see the whole grid, on a small screen, it kinda explodes out of the right side.
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.
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.
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
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.
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
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).