Images appearing very small in Chrome
-
-
- mecsys
- Sr. Rocketeer
- Posts: 192
- Thanks: 0
-
Joomla 3.3.6 installation:
sereneintentions.com/cmssi/
images in articles appear properly sized in Firefox and IE, but in Chrome they are displaying as very small.
i read in an old post that it was necessary to include the dimensions with the image. tried that on one image on sereneintentions.com/cmssi/services/workshops.html but that didn't have any effect.
have previously been told that it was better not to include height and width, so that the pages would be properly responsive for other devices.
is there a fix that will take care of all images, rather than having to go through page by page?
and will including width and height cause problems on smaller devices?
thanks.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
mecsys wrote:
that's the only way i know to place images next to text.
is there another way?
Yes a much better way that we use on our demos. Unlike tables this method is also responsive.
In your
gantry-custom.css <-{Click CSS Guide below}This image is hidden for guests.file add this:
Please log in or register to see it.
/* Custom Widths */ .row {margin: 0 -15px;} .gantry-width-block {display: block;float: left;} .gantry-width-spacer {margin: 15px;} .gantry-width-10 {width: 10%;} .gantry-width-20 {width: 20%;} .gantry-width-25 {width: 25%;} .gantry-width-30 {width: 30%;} .gantry-width-33 {width: 33.33%;} .gantry-width-40 {width: 40%;} .gantry-width-50 {width: 50%;} .gantry-width-60 {width: 60%;} .gantry-width-66 {width: 66.66%;} .gantry-width-70 {width: 70%;} .gantry-width-75 {width: 75%;} .gantry-width-80 {width: 80%;} .gantry-width-90 {width: 90%;}
For your custom HTML module code, modify this:
<div class="gantry-row"> <div class="gantry-width-container"> <div class="gantry-width-25"> <div class="gantry-width-spacer"> <span class="rt-image"><img src="/Chimera25/images/rocketlauncher/pages/about-us/img-02.jpg" alt="image"></span> <h4>Our Mission</h4> <p>Objectively innovate</p> </div> </div> <div class="gantry-width-25"> <div class="gantry-width-spacer"> <span class="rt-image"><img src="/Chimera25/images/rocketlauncher/pages/about-us/img-03.jpg" alt="image"></span> <h4>Our Values</h4> <p>Proactively envisioned multimedia</p> </div> </div> <div class="gantry-width-25"> <div class="gantry-width-spacer"> <span class="rt-image"><img src="/Chimera25/images/rocketlauncher/pages/about-us/img-02.jpg" alt="image"></span> <h4>Our Mission</h4> <p>Objectively innovate empowered</p> </div> </div> <div class="gantry-width-25"> <div class="gantry-width-spacer"> <span class="rt-image"><img src="/Chimera25/images/rocketlauncher/pages/about-us/img-02.jpg" alt="image"></span> <h4>Our Mission</h4> <p>Objectively innovate empowered</p> </div> </div> </div> </div>
This will resemble a 4 column table. - Last Edit: 10 years 3 months ago by DanG.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
I suggest to check out the docs
www.rockettheme.com/docs/joomla/basic/cr...tom-responsive-grids
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Actually the Docs follow my guide precisely. So instead of a table, create a custom HTML modules and use this content code:
<div class="gantry-row"> <div class="gantry-width-container"> <div class="gantry-width-15"> <div class="gantry-width-spacer"> <span class="rt-image"><a href="/cmssi/images/Soul-Collage-sample1.jpg" target="_blank"><img src="/cmssi/images/Soul-Collage-sample1-tn.jpg" alt="Soul-Collage-sample1-tn"></a></span> </div> </div> <div class="gantry-width-20"> <div class="gantry-width-spacer"> <p> <strong>Bright Future:</strong></p> <p>" I can not see exactly were I am going, but as I'm flying there I know it is very colorful, very bright and beautiful!"</p> </div> </div> <div class="gantry-width-15"> <div class="gantry-width-spacer"> <span class="rt-image"><a href="/cmssi/images/soul-collage-sample2.jpg" target="_blank"><img src="/cmssi/images/soul-collage-sample2-tn.jpg" alt="soul-collage-sample2-tn"></a></span> </div> </div> <div class="gantry-width-20"> <div class="gantry-width-spacer"> <p><strong>Inner Strength:</strong></p> <p>"My horse, my strength. Always trusting that strength that gave me what I needed to keep my head above water, to stay afloat, and the freedom to continue moving forward."</p> </div> </div> </div> </div>
This method is totally responsive unlike tables. In Desktop mode in Chrome the images are full-sized as the Chrome user agent stylesheet isn't inserting code that was reducing your images sizes.
In Tablet mode, you'll see this:
This image is hidden for guests.
Please log in or register to see it.
In mobile mode the images would be full width stacked atop the full width text content. So now your covered for all screen devices unlike tables which can only reliably do Desktop.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
mecsys wrote:
thanks DanG and Henning. will have to look into these doc's and try it out.
going to change the way i build articles.
For a better understanding always check our Docs as they are truly awesome and also please see the guide Creating a Responsible Table, i.e. Responsive if as a LAST RESORT and that you MUST absolutely need it
- Last Edit: 10 years 3 months ago by DanG.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
mecsys wrote:
Curious that i am not having this problem with other sites, that also have RocketTheme templates.
is it the Osmosis template?
The image size is a combination of three factors:
1) Chrome
2) how Chromes user agent string styles tables
3) a Rockettheme responsive template
Do your other Rockettheme templated sites meet those criteria like your current one does?
-
Time to create page: 0.065 seconds