Jump to content


Photo
- - - - -

Size Matters

Image size browser type browser image size

  • Please log in to reply
11 replies to this topic

#1 fpcas9431

fpcas9431

    Advanced Member

  • Members
  • 65 posts
  • Country: Country Flag

Posted 08 July 2013 - 08:27 PM

Hello there: I was recently on a PC and brought up our website to show someone. I was extremely surprised (and somewhat embarresed) to see that some of our carefully chosen and sized images were displaying completely differently in explorer or even firefox on a PC. 

 

I work in MAC so didn't notice until now.

What can we do to ensure the user experience PC or MAC is similar to what we designed/intended when we build the site?

 

Your thoughts are much appreciated.

 

Site: www.thetradinglab.com

 

 

An example is RSS icon/button. In MAC safari/firefox looks fine...in PC it's orgininal size and skews front page...

 

 



#2 batman

batman

    Bat Learning

  • Members

  • 2027 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 08 July 2013 - 11:16 PM

Hi fpcas9431
I work on Mac too, but I stole my wife's PC and I see your site correctly in Firefox 22.0 and Chrome  27.0.1453.116m.
I do not see properly only with Explorer 9.
Please, you can verify the versions.


#3 fpcas9431

fpcas9431

    Advanced Member

  • Members
  • 65 posts
  • Country: Country Flag

Posted 08 July 2013 - 11:45 PM

Hello Batman: Are you asking me the versions of browsers I used on PC side?

 

If so, I will have to wait until morning: I don't have access to one right at the moment.

 

It appeared to be browser based: As if the browser was not recognizing the 'code' for sized images? At least at a glance that's how it appeared to me: I was wonder if I had to 'do' something to make those sizes available to all browsers...or if it's a glitch on PC based browsers what the work around for this is?

 

I will re post in the morning on Browsers PC. Mac (which is fine: I use Safari 6.0.5 and tested in Firefox: 18.0.2 also fine...



#4 batman

batman

    Bat Learning

  • Members

  • 2027 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 09 July 2013 - 12:10 AM

Hi again

Yes the browser version in PC, I suppose this is the problem, in my wife┬┤s PC your web works fine with Firefox and Chorme.



#5 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 09 July 2013 - 09:58 AM

I think the problem is your site is using fixed positions to make it look right on one monitor, but to everyone else who does not have your monitor the sizes are all offset.

 

Basically you should try to never use fixed positions and pixels instead use em and percentages.


  • batman likes this

#6 fpcas9431

fpcas9431

    Advanced Member

  • Members
  • 65 posts
  • Country: Country Flag

Posted 06 August 2013 - 03:57 PM

Hello there: I am just back from holidays. Viewing the problem still exists. Only appears in Explorer, using version 10.0.07. I see messer suggestion however currently this displays find in all formats and browsers on desktop (various sizes) and mobiles. Only Explorer and there fore windows based machines and apps affected, and only content in that banner. Any suggestions?



#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 09 August 2013 - 03:29 AM

First, his name is Simon, not messer, like yours isn't Advanced Member.

 

Next, did you implement his recommendations?  IE is very sensitive to positioning, scaling, proportions, etc.  It's inevitable that IE will display a site differently than other browsers.  Each renders CSS in their own unique ways.



#8 fpcas9431

fpcas9431

    Advanced Member

  • Members
  • 65 posts
  • Country: Country Flag

Posted 10 August 2013 - 01:06 AM

First: Simon, sincere apologies, on the name. I see that now: Rob, I don't spend much time on forums. 

 

2nd: I will attempt that in the next few days: Can you from your faster collective experience fill me in: Will changing this affect the browsers it's currently working in? That will be really helpful to know.

 

BEst

 

Frank



#9 fpcas9431

fpcas9431

    Advanced Member

  • Members
  • 65 posts
  • Country: Country Flag

Posted 23 August 2013 - 03:44 PM

Morning: I have a few minutes to review this and make adjustments. I have read the comments above: Where exactly would one make that change, as it's not clear in the image file itself nor in the "banner" which the images that are changed in IE.



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 August 2013 - 09:31 PM

Check your custom code and any CSS you've added to any customization point. You'll find you've added, as Simon points out, fixed values for things.

 

So, where you've said in CSS that something should be 50px wide, replace the 50px with the corresponding value in percentages or in em.  Use this calculator to convert form PX to EM sizes.

Please Login or Register to see this Hidden Content

 

When you use fixed values, they're not responsive. As a result, your site will break in mobile view. So, when someone views your site on different browsers than you're using, they are stuck with the fixed pixel sizes, and the site will not look the same. Since browsers render differently, they will never look close to the same unless you use percentage or em sizes. If a site is 1000px on your machine and that fills the screen, but i look at it on a 1980pixel view monitor, I'm still going to see 1000px width. It won't fill my screen because it's not 100%. 

 

Aside from our documentation, this link will explain some of the basics of CSS in responsive design.

Please Login or Register to see this Hidden Content



#11 fpcas9431

fpcas9431

    Advanced Member

  • Members
  • 65 posts
  • Country: Country Flag

Posted 23 August 2013 - 10:12 PM

I have checked "Custom CSS" and have checked the banner itself. I do not see any custom code here. I certainly am not equipped to have put it there. Can you be a wee bit more specific as to where this code might be: I have also checked the various images and there is no CSS attached there either



#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 August 2013 - 07:41 PM

I'm not sure where custom code has been placed in your site.  I see it's using Framework 2.4.1, but we're at 2.4.4 so you're missing some upgrades.  Please update it ASAP.

 

In development, custom code could have been placed in a child theme, pagelines-customize/style.css or other locations.  It's clear customization took place, though.







Also tagged with one or more of these keywords: Image size, browser type, browser, image, size