Manage "g-grid" and "g-block size-#" on mobile devices
-
-
- Laurent BRIERE
- Rocketeer
- Posts: 76
- Thanks: 3
-
Below is my page on 1280px and 480px devices.
and the code :
I would like to get on mobile devices the image and the paragraph on the same line. How is it possible ? In that size my HTML stays as It was on 1280px wide.<div class="g-grid"> <div class="g-block size-20"><img src="images/powered_by.png" alt="powered by" /></div> <div class="g-block size-5"> </div> <div class="g-block size-75">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet magna enim, id commodo quam euismod rutrum. Mauris at egestas dui. Curabitur auctor diam ac varius efficitur. Curabitur dignissim vehicula neque id varius. Ut aliquet tincidunt lacinia. Morbi gravida facilisis auctor. Nulla facilisi. Nullam in tellus quam! Sed id ligula sit amet felis tempor tincidunt vulputate quis dolor? Duis ultrices sit amet velit nec sagittis. Nulla porta neque non interdum semper? Sed at ultricies massa, sit amet egestas augue. Nulla vel iaculis nulla?</div> </div>
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Laurent BRIERE
- Rocketeer
- Posts: 76
- Thanks: 3
-
Now you can access to the BO
MrT wrote:Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.
Regards, Mark. - Last Edit: 9 years 8 months ago by Laurent BRIERE.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Thanks for the login - all I need now is a url and I'll be able to look for you
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Laurent BRIERE
- Rocketeer
- Posts: 76
- Thanks: 3
-
Ouups so sorry :
labo-betrained.fr/gantry5/administrator
MrT wrote:Thanks for the login - all I need now is a url and I'll be able to look for you
Regards, Mark. - Last Edit: 9 years 8 months ago by Laurent BRIERE.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Gantry 5 is deliberately designed to stack the blocks one above the other at the point the viewport gets too small (to make a better display). You can change with this with custom CSS but I think it's a really bad idea to do this as on mobile devices that image will be so tiny as to be unreadable and the text will be in an extremely narrow column next to it (see my screenshot to illustrate what will happen on mobile). Left to right columns under up as template width top to bottom blocks with Gantry 5 - again as this is a major feature of the framework I think it's not a good idea to change it.
Are you really sure you want to do this - I counsel against it.
Regards, Mark. - Last Edit: 9 years 8 months ago by MrT.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Laurent BRIERE
- Rocketeer
- Posts: 76
- Thanks: 3
-
I know that
In fact I would like to insert an icon + spacer + text
... I edited the article homepage - Last Edit: 9 years 8 months ago by Laurent BRIERE.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
See how I've altered your article now - there a different way to do it without using the gantry grids and modifying them. I think it's also better the way it wraps around the image and now it won't stack either. I have used inline styling just to show you but you should use classes instead in a custom CSS file.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Laurent BRIERE
- Rocketeer
- Posts: 76
- Thanks: 3
-
Thanks Mr T but...
The text column on the right (fluid height) gives the height to the first one (Icone)... That why I decided to use a grid system instead of floated elements as you did
An other solution ?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
If you use the grid system then it will behave as the Gantry 5 grid system - which apparently you don't want. Therefore you don't want to be using the grid system. So, you need to take a DIY approach creating your own classes using the flex box model. I really think it's the wrong thing to do to start altering the way that the gantry grids behave just to suit this one particular case.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.063 seconds