-
Posts
-
Hi Team,
Is it possible to make the space around images smaller (where the blue is in screenshot below) and make the size like it is between side images with the green arrow where it says “perfect”
* here is a screenshot http://www.omglovetwins.com/wp-content/uploads/2013/06/Screen-Shot-2013-06-14-at-7.24.04-PM-1.jpg
* live site http://www.omglovetwins.com/a-magento
Thanks,
jasmine
Hi,
Try this on your custom.css or Quick CSS
.page-id-1668 .av_one_half {
margin-left: 3%;
width: 50%;
}
.page-id-1668 .av_one_fourth {
margin-left: 3%;
}
.page-id-1668 .av_one_fourth.first {
margin-left: 0;
}
.page-id-1668 .template-page.content.twelve.alpha.units {
padding-top: 20px;
}.page-id-1668 is the unique id of the link you us. You can remove it if you want to apply the style throughout the site.
Regards,
Ismael
Thanks Ismael,
this worked perfectly only one thing the side images shrink see this screenshot the green arrow in the middle shows the Red shoes image stays the same size while the side images shrink in size (top image is as in dashboard original size and bottom is on live website)
* screenshot: http://demo.globalads24.com/wp-content/uploads/2013/06/Screen-Shot-2013-06-15-at-11.24.04-AM-2.jpg
so i need the images to stay the same size as in dashboard and the margins to be on left and right of the page aligned to left and right and middle image to stay aligned in the center. Would this be possible?
i adjusted some numbers below is the css code as i have it now and here is a live page http://www.omglovetwins.com/a-magento
.page-id-1668 .av_one_half {
margin-left: 0.0001%;
margin-right: -3%;
width: 50%;
}
.page-id-1668 .av_one_fourth {
margin-left: 3%;
}
.page-id-1668 .av_one_fourth.first {
margin-left: 0;
}
.page-id-1668 .template-page.content.twelve.alpha.units {
padding-top: 10px;
}PS. and thanks for pointing out about .page-id-1668 as this is just a test site i made a mistake was suppose to upload to a demo one as this website will be for our music and film so will be deleting it as soon as we finish testing for woocomerce :-)
Regards,
jasmine
Hi,
The side images doesn’t shrink. Actually, the code increased the size of the one_half column then decrease the left margin, so technically the red shoes is much bigger.
.page-id-1668 .av_one_half {
margin-left: 0.0001%;
margin-right: -3%;
width: 50%;
}This code decrease the left margin of one_fourth column, I will add the code to make them bigger.
.page-id-1668 .av_one_fourth {
margin-left: 3%;
width: 23.5%;
}This code makes sure that the first column has no left margin
.page-id-1668 .av_one_fourth.first {
margin-left: 0;
}This code to decrease the top padding
.page-id-1668 .template-page.content.twelve.alpha.units {
padding-top: 10px;
}Regards,
Ismael
- The topic ‘Smaller padding around Images’ is closed to new replies.