Post by PiercingPirate » Mon Dec 31, 2012 1:02 am

Ok, I have a Facebook widget on my shop and when the customer is not loogged onto their FB account, the widget works nicely. However, if they are logged onto the FB account, the widget goes all weird. I am pretty sure it has something to do with the css code of the widget, something with the positioning. I wonder if someone who's good with css could give me some help?
I use Chrome as main browser.

Thank you so much!


http://www.shop2.piercingpirate.com

Attachments

facebook.jpg

This is how it looks. - facebook.jpg (51.9 KiB) Viewed 391 times


http://www.piercingpirate.com

The best selection of unique body jewellery in the UK


New member

Posts

Joined
Thu Nov 15, 2012 7:52 am
Location - Poole, UK

Post by justcurious » Mon Dec 31, 2012 4:32 pm

If you're using Chrome, right click on the element that looks wrong and select 'Inspect element'.

As you move your mouse over the code in the bottom panel, it highlights the area on the page. When you click on a section of code in the bottom panel, it shows you the relevant css (and line number) on the right. Take the time to look at the other sections of the panel on the right - Metrics is really useful for spotting which elements are giving you large margins.

Look out for the little triangles at the beginning of the code lines - for example, a <div> ... </div> may actually take up lots of lines, but these are often condensed onto 1 line. Click the little triangle and it opens up.

There are loads of tutorials - just google ' Chrome inspect element tutorial'

I love Google Chrome!

Google Product Feed - Get your products into Google Shopping. Includes a bulk update facility.
Backup Pro - Backup (on demand or scheduled), Restore and Clone your store.
Freestyle Box - Add multiple information boxes on multiple pages of your store. Includes optional "Code Mode".
View my other extensions


User avatar
Active Member

Posts

Joined
Sat Dec 24, 2011 4:36 pm
Location - UK

Post by haosmark » Tue Jan 01, 2013 2:01 am

Looks like an issue with float property. It might be that logged in "like" doesn't have the same id or class.
I didn't look at the code, just guessing from your picture

New member

Posts

Joined
Wed Oct 10, 2012 1:59 am

Post by PiercingPirate » Wed Jan 02, 2013 1:19 am

I changed the float prop. on the css file and put 'right' but the issue remains. I took a look at the inspect element thing on chrome but i dont really know if there is something wrong or how to fix it. Any other tips?

http://www.piercingpirate.com

The best selection of unique body jewellery in the UK


New member

Posts

Joined
Thu Nov 15, 2012 7:52 am
Location - Poole, UK

Post by haosmark » Wed Jan 02, 2013 3:43 am

I didn't mean css file. I meant in HTML it probably doesn't assign correct id/class to that element.
I don't have FB so can't say for sure though.

You can change CSS values right in browser. Just right click on the broken one and look/play with it's values and it will adjust in real-time.

New member

Posts

Joined
Wed Oct 10, 2012 1:59 am

Post by PiercingPirate » Wed Jan 02, 2013 4:24 am

the problem is, I do not know what to change...

http://www.piercingpirate.com

The best selection of unique body jewellery in the UK


New member

Posts

Joined
Thu Nov 15, 2012 7:52 am
Location - Poole, UK
Who is online

Users browsing this forum: Google [Bot] and 12 guests