- This topic has 3 replies, 1 voice, and was last updated 6 years, 11 months ago by
JVmm.
- AuthorPosts
- May 25, 2017 at 9:05 pm #2999
JVmmParticipantHow can I make the featured images on blog section rounded?
So far I managed to make blog-post rounded like this:
ht-blog-post{
float: left;
margin-left: 5%;
width: 330px;
height: 330px;
background: rgba(255, 255, 255, 0.25);
margin-bottom: 250px;
border-bottom: 3px solid #444;
border-top: 3px solid #444;
border-radius: 100%;So now I have squared images on top of a round background.
May 25, 2017 at 11:33 pm #3000JVmmParticipantOk, I could get it done by adding:
img {
border-radius: 100%;
height: 330px;
max-width: 330px;
vertical-align: middle;}
to the CSS. But now I get a white slider selectiong when I put the cursor on top of the image.
Any clues about how to change that too?Thanks in advance.
May 26, 2017 at 12:03 am #3003JVmmParticipantSo, I managed to do what I needed.
The problem now is… When I get that done by adding:
img {
border-radius: 100%;
height: 330px;
max-width: 330px;
vertical-align: middle;}
My image on About Us got rounded too. So, is there any way I can save that image from getting rounded with the others?
————————————————-I figured I had to edit .ht-blog-thumbnail a{
but when I put border-radius there, nothing happens. But by editing height and width I see only those Blog Section images being edited, so maybe I’m following the right track. I just don’t know why I cant edit border-radius.May 26, 2017 at 12:51 am #3005JVmmParticipantGuys, I’m sorry for flooding it here, but I just solved my own problem, so I’ll at least leave the solution here for posterity.
The problem was I had to specify img on .ht-blog-thumbnail a{
So the right way to make it would be:
.ht-blog-thumbnail a img{
border-radius: 100%;
height: 310px;
max-width: 310px;
margin-left: 3%;
margin-right: 3%;
margin-top: 2%;
}I hope I can help someone with that.
- AuthorPosts
- You must be logged in to reply to this topic.
