Joomla Templates Club 406,261 posts

[regin Friend reginJoin date: March 2007Posts: 117Downloads:2Uploads:60 Thanks: 28 Thanked: 1 times in 1 posts]

#198504

Hi

Stole some CSS from another joomlart tempalte – I think it was Purity III, and wanted to present the staff properly:
http://devtantec.nioba.dk/index.php/tantec/tantec-profiles

It looks great, exept from when I resize the browser. The images they scale down. Id like them to Behave like here:
http://www.joomlart.com/demo/#purity_iii

But just how do I do that?…

Help appreciated!

Regards
Regin

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#537881

It is responsive – that’s why it scales down. 🙂

Try adding the following rule to your custom.css file and see if it helps

@media (min-width: 768px){ .col-sm-6 {
width: 50%;
float: left;
}
}

[regin Friend reginJoin date: March 2007Posts: 117Downloads:2Uploads:60 Thanks: 28 Thanked: 1 times in 1 posts]

#537884

Ah… 🙂

I added the code, but it only affects the images when they are supposed to be full size. So now they are on a line when scaling down, but not when seen in full site width..

http://devtantec.nioba.dk/index.php/tantec/tantec-profiles

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#537886

Two things…

1. Can you set optimise css to OFF so that one can see the css files please
2. I don’t see the code I gave you in the compressed file

can you do a screenshot of what you see because I see just the normal scaling

[regin Friend reginJoin date: March 2007Posts: 117Downloads:2Uploads:60 Thanks: 28 Thanked: 1 times in 1 posts]

#537888

Hi

1. Done – set to OFF
2. Should be in custom.css – put it in line 178

Screenshot of full size + custom.css:

Regards
regin

---

Attachments:

1. 
2. 

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#537891

That’s better. I can see what I’m doing now!

OK. You have a couple of problems in your custom.css file. You call .col-sm-6 and .col-md-3 @ lines 137 and 140 so delete those

.col-sm-6 { width: 50%;
}
.col-md-3 {
width: 25%;
}

Then at the end of the file add this additional code after the one I already gave you

@media (min-width: 992px){.col-md-3 {
width: 25%;
}
}

That should set it how you want.

1 user says Thank You to swissa for this useful post

1. regin

[regin Friend reginJoin date: March 2007Posts: 117Downloads:2Uploads:60 Thanks: 28 Thanked: 1 times in 1 posts]

#537898

Ah, your are right, it works!!

Thanks a bunch. I just learned a bit about @media queries there too!

Just one last question.. The first image is proportionally bigger than the other images when I resize the browser – got any idea why? It is the same image I use below, and there it has the right size.

Regards
Regin

———-
UPdate: Wait – I got it. Actually it is not the same image, but a much larger one. That must be the reason why it is larger too when resizing the browser. All under control. THANKS! 😀

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#537903

Glad you sorted it with the image: although the guys all look the same to me! 😉

[Author]

Posts