Jump to content

Archived

This topic is now archived and is closed to further replies.

fpcas9431

Size Matters

Recommended Posts

fpcas9431    0
fpcas9431

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...

 

 

Share this post


Link to post
Share on other sites
batman    389
batman
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.

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
fpcas9431    0
fpcas9431

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...

Share this post


Link to post
Share on other sites
batman    389
batman

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.


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Simon    247
Simon

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.

  • Like 1

Share this post


Link to post
Share on other sites
fpcas9431    0
fpcas9431

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?

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
fpcas9431    0
fpcas9431

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

Share this post


Link to post
Share on other sites
fpcas9431    0
fpcas9431

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.

Share this post


Link to post
Share on other sites
Rob    547
Rob

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. http://riddle.pl/emcalc/

 

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. http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
fpcas9431    0
fpcas9431

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

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • Similar Content

    • BentleyD
      By BentleyD+
      Hey there,
       
      I am working on BentleyRolling.com. I used grams on MoonbodySoul.com and all the images are cropped to a square, whether they are square or 4:5 when posted on instagram, they still get cropped to a square. This looks way better than some being squares and some being 4:5. Did something change since I designed MoonBodySoul.com with Platform5? Can you help me crop all images to a square on BentleyRolling.com 
       
      All the best,
       
      Bentley
    • cstudio
      By cstudio
      How do I control the lightbox effect on the plugin "popthumbs"?  On mobile, it opens up much to small then when expanded it opens to large.  I would like to control the the lightbox to like 90% of the viewer window but I can't figure out how/where to control that.
      Site example

       
      Thx
    • Queue-it
      By Queue-it+
      Hi,
      I am using pl-section-journey and hiding most of the images. When running the page via google speed insights, it tells to optimize all the images that are in this plugins default. (e.g. https://queue-it.com/wp-content/plugins/pl-section-journey/images/drawer-5.jpg ) Like this one that is not visible on the website, but is a part of the plugin and comes up in google insights.
      I've deleted all the images in the plugin, but they still seem to come up. Ref. this page: queue-it.com/features
    • dougalperman
      By dougalperman+
      Hi there,
      I'm a big fan of Pagelines, and have been for years.
      I'm trying to control the size of video embeds and having some difficulty. I see that I can just paste the Vimeo video URL into the post and an embed widget will automatically appear, which is great. But the embed box created is much taller that the video (689 x 1000 pixels) so the content sits in the middle of a tall black box, which looks awkward.
      I tried using the full iFrame embed code from Vimeo, which solved the disproportionate embed frame size (or aspect ratio) issue, but despite specifying the dimensions I want (690 x 388), the videos displayed on the post are sized at 300 x 150 pixels.
      I can't work out how to change either.
      I'm using the latest version of Pagelines Framework (Pro) with the Agency them.
      Any help or advice very much appreciated.
      Thanks,
      Dougal
    • globalnative
      By globalnative+
      Hi there!
      I'm trying to create a featured image for my new blog post. It has text in it, and when I add it as a featured image some of the text is cut off on the right.
      Could I get the ideal dimensions for featured images? Or, a way to customise the dimensions so that they are easier to fit in the way I need?
      Thank you kindly
      Nate
       


×