SOLVED How to keep 3 images in line?
-
-
- Pinto Buck
- Rocketeer
- Posts: 74
- Thanks: 11
-
Using Gantry 5, Hydrogen template, and Joomla 3.51.
My custom template has 3 images in line in a single row of the layout. They shrink repsonsively as the browser window narrows up to a point when the row breaks, then the images stack and get bigger then ever. I have not applied any break points. I would like to keep the images in line and see if they would continue to shrink as the browser's window narrow. I applied g-displayinline to each image, but it had no effect. I also applied my own inline-block and no-wrap CSS with no effect.
After the row breaks, and the images stack, and the widest image will continue to shrink as the browser window narrows, but all 3 images are now too big to be attractive. Is there a way to keep these images in line? Thank you for suggestions. - Last Edit: 8 years 10 months ago by Pinto Buck.
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
- This is happening because the grid is reseting it self for mobile why dont you use the header image in one gif image that way it will not do that...
- Last Edit: 8 years 10 months ago by Damir.
-
The following users have thanked you: Pinto Buck
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Pinto Buck
- Rocketeer
- Posts: 74
- Thanks: 11
- Thank you for your reply, Damir. In my header, the middle "image" is an HTML5 animation. The two outer images are jpg. For appearances, they all look like a single image with animation in the middle. You can see the effect at my test site at FraudStoppers.com. Interestingly, the animation can shrink all the way as the browser window narrows, but when the break point happens all 3 items stack, have more room, and become large.
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
- This needs a different approach and not like you are doing it as it is impossible to make all in one line maybe make a background image of the lines and those 3 images we can add then in one line then ...
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Pinto Buck
- Rocketeer
- Posts: 74
- Thanks: 11
-
I'm interested. Please explain further. For example, is the concept to use a single particle for the area of the 3 images, put a clear border around that particle, then somehow display the 2 images and 1 animation inline within the particle?
I did try RT's mosaicgrid particle, but it shuffled the images as the browser window narrowed, and it had a zoom feature. RT's imagegrid particle had spacing between images, stacked images as the browser window narrowed, and displayed promo images. I did not see how to put my middle "image" annimation in either of those particles. - Last Edit: 8 years 9 months ago by Pinto Buck.
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
This could be done with simple html code don't know why you did all that in the layout its a mess, this is not a layout builder like you think it is ... most of the stuff you do in css including the background gradients etc ... you only import images ...
What kind of expertise do you have in Website building if i might ask?
See what i did here with the header section for logo and menu - Damir Layout is the outline
fraudstoppers.com/index.php/employee-screening
This is only the example that you don't need all those layout items you have sections and style those section in the css file or in page settings like i did ...
Also do you have a Image of the layout how you want it to look?
For your layout i would need 2-3 hours to make that in css code and adjust it for devices and that is not in the support, its a custom job ... - Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Pinto Buck
- Rocketeer
- Posts: 74
- Thanks: 11
-
Thank you for replying and for visiting my site. I'll try to reply to your questions.
Damir wrote:This could be done with simple html code don't know why you did all that in the layout its a mess, this is not a layout builder like you think it is ... most of the stuff you do in css including the background gradients etc ... you only import images ...With respect, the template at Fraudstoppers.com includes some sophisticated techniques not previously available in Gantry 5. One of the techniques was already submitted to Github as a Gantry 5 enhancement pull request by a Rockettheme professional. Another of the techniques was designated as a Gantry 5.3.0 milestone by Github. Unfortunately, Custom.scss has some limitations.
I appreciate your suggestion about using gradients, instead of repeating images, to form borders. I used spacer particles to place an inner border around my active area. I may address gradients as I turn my attention to the other problem you are helping me with: . Need to keep middle of template from shrinking as browser window narrows. Thx.
Damir wrote:What kind of expertise do you have in Website building if i might ask?I have a description of my experience here .
Damir wrote:See what i did here with the header section for logo and menu - Damir Layout is the outlineI might be missing something. When I made Damir Layout the default template and assigned the menu to it, the Damir Layout template appeared essentially empty. About 20 of my particles had been removed from the layout, and only two particles were retained. When I looked inside the particles, I could not see any modifications or new CSS. I would like to undertand your example.
fraudstoppers.com/index.php/employee-screening. This is only the example that you don't need all those layout items you have sections and style those section in the css file or in page settings like i did ...
Damir wrote:Also do you have a Image of the layout how you want it to look?The template is pretty much complete, and I'm working on making it fully responsive. So, the template looks the way it should. When you visited my site on 7/03/2016, I was running some experiments with flexbox, which took a while to refine. However, the template is in good order now.
Damir wrote:For your layout i would need 2-3 hours to make that in css code and adjust it for devices and that is not in the support, its a custom job ...Thank you for your offer. A solution that worked for me was to adjust the break points on the Styles page. - Last Edit: 8 years 9 months ago by Pinto Buck.
-
-
-
- Pinto Buck
- Rocketeer
- Posts: 74
- Thanks: 11
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
Thanks for the kind words
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
Time to create page: 0.077 seconds