Make images in K2 items responsive in Graffito for mobile
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- 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.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
You've hardcoded fixed dimensions on the img tag - remove these. You should not use fixed dimensions in a responsive template.
See our documentation here : http://www.rockettheme.com/docs/joomla/basic/creating_responsive_content.md
The same is true of your video.
The is an excellent article on how to achieve fluid width(responsive) video http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
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.
-
-
-
- TheEthic
- Newbie
- Posts: 5
- Thanks: 0
-
Thanks for the reply the code for making an responsive image has worked on the first image I have edited so should work on the others as well. Do I have to alter the code on an image by image basis or is there a quicker way to do this?
The article on responsive video is great. I am using youtube and vimeo embedded video so in iframe so the code should hopefully work. However where do I put it and activate it within Graffito?
All the best
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
You will probably find that it is the editor that you are using that is adding the hardcoded dimensions when you add an image. We always recommend our rokpad editor (non-wysiwyg) - wysiswyg editors tend to "tidy" code and write inefficient code. So, yes, you will need to do this for each image that you've already hardcoded image dimensions.
You put custom CSS in a custom CSS file.
This is how to create a custom CSS compatible with Gantry 4...
Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_iridescent would be rt_iridescent-custom.css). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"
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.039 seconds