Image featured boxes with smaller images

3 replies · opened Jan 20, 2017

JjuanleJan 20, 2017

Hello, firstly thanks for your support and great template.

I really like http://themes.semicolonweb.com/html/canvas/featured-boxes.php the images featured boxes. However, I do not always have big pictures. Could you recommend me how to use the image featured box with pictures of a size 120px x 120px. I have tried myself but I do not manage to get a nice effect as the border in the top does not display or the image becomes too big when I am in a mobile device.

Thanks and have a nice day
Juan

JjuanleFeb 15, 2017

I found a workaround solution by changing the style file. I changed the element fbox-media removing the rounded border and including border in the top. Then all work fine. You can close this item as solved.

Thanks
Juan

JjuanleFeb 15, 2017

You can mark as resolved, below you can find the modifications I did in the style.css file (just removing rounded corners and adding top border). This version I think is better as it let the user to either put picture/video or not.

.feature-box.media-box.fbox-bg .fbox-desc {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #fff;
border-color: -moz-use-text-color #e5e5e5 #e5e5e5;
border-image: none;
border-radius: 0;
border-style: none solid solid;
border-width: 1px;
padding: 25px;
}

JjuanleFeb 15, 2017

Sorry I took the code before with Firebug.

The real change in the style.css is explained below

.feature-box.media-box.fbox-bg .fbox-desc {
padding: 25px;
background-color: #FFF;
border: 1px solid #E5E5E5;
border-top: 0;
border-radius: 0 0 5px 5px;
}

Simply removing border-top: 0; we get the desired effect.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard