Public Forums 71,145 posts

[felix1 Friend felix1Join date: February 2015Posts: 220Downloads:36Uploads:78 Thanks: 67 Thanked: 20 times in 6 posts]

#207625

Hallo!

I have just learnt how to make mastcol image responsive with this code in custom.css:

@media (max-width: 992px) {
.t3-mastcol img {
width: 100%;
}
}

But how can I make a right margin in responsive mode? Right now the image spans all the way out to the red background area.

I would like to have a white margin to the right of the image with 20px. Is it possible?

Sincerely//Felix Rimfrost

---

Attachments:

1. 

Felix Rimfrost

[felix1 Friend felix1Join date: February 2015Posts: 220Downloads:36Uploads:78 Thanks: 67 Thanked: 20 times in 6 posts]

#574855

A supplement only, this applies to my 10-inch tablet. On mobile view it looks good…

Felix Rimfrost

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#575223

Hi @felix1,

Please open file /templates/purity_iii/css/custom.css then add this code :

img {
max-width: 100%;
}
.t3-sidebar .row {
margin-right: 0;
}
@media (max-width: 768px) {
.t3-sidebar .row {
margin-left: 0;
}
}

1 user says Thank You to Adam M for this useful post

1. felix1

[felix1 Friend felix1Join date: February 2015Posts: 220Downloads:36Uploads:78 Thanks: 67 Thanked: 20 times in 6 posts]

#575266

Nice, it worked! 🙂

Although, I didn’t have to use the first img code:

img {
max-width: 100%;
}

It worked anyway and now the image looks fine on my tablet…

Sincerely//Felix Rimfrost

Felix Rimfrost

[Author]

Posts