Images are too big
Permalink
I'm new to concrete. I'm trying to build a portfolio website. I want to put two images, the icon for PDF and an icon for MS Word, and link them to my resume. I place the images in, and while in the editor it looks fine. but once it shows up on the page, the images are as big as the width of the blocks. Here's the page
http://www.stafaalhassani.com/index.php/about/...
The images are supposed to be 58x57 pixels. I even go into the HTML to look at the img tag, and width and height attributes look correct. I have no clue why they come out so big.
http://www.stafaalhassani.com/index.php/about/...
The images are supposed to be 58x57 pixels. I even go into the HTML to look at the img tag, and width and height attributes look correct. I have no clue why they come out so big.
Are you using the image block or the content block to insert the images?
I'm using a content block
Chances are it's something with the theme stretching the images to 100% width. Try adding "max-width: 58px;" to the css.
Your theme is built on flexgrid 1200. It is a responsive theme and it will force all your images to 100% width. You will need to use "max-width" to control the size of images in your pages.
If your images will be in multiple places the best way to modify the css would be in your root/packages/themepackage/themes/themename/typography.css
A simpler way to accomplish this on a page by page basis would be to enter the extra css through the "design" dialogue. click on the block, click "design", and click the "css" tab. enter the max-width rule here and click save.
I would suggest using an image block to display each image and apply your custom css to those blocks.
If your images will be in multiple places the best way to modify the css would be in your root/packages/themepackage/themes/themename/typography.css
A simpler way to accomplish this on a page by page basis would be to enter the extra css through the "design" dialogue. click on the block, click "design", and click the "css" tab. enter the max-width rule here and click save.
I would suggest using an image block to display each image and apply your custom css to those blocks.
Thanks, that takes care of the width issue. But now I have a new issue. The images are stacked on top each other, when I want them to be side-by-side. Any idea on how to fix that?
Since I'm going to be adding a lot more images to my site, and you identified the issue to be the theme, I decided I'll just change to a different theme. Thanks for the help.
When I need blocks to align next to each other, I have had some luck clicking on the block and choosing Design->CSS and adding :
It's quick to test out. If it doesn't work, clear out the CSS so it doesn't mess with other stuff on the page.
float:left; margin:10px; max-width:30%; //sometimes works
It's quick to test out. If it doesn't work, clear out the CSS so it doesn't mess with other stuff on the page.
