Jump to content

Archived

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

novsun

Hero Component Image Alignment

Recommended Posts

novsun

In the Hero component demo/preview the image is aligned top of text to the Header.

 

but on my hero component the image is floating around the bottom, whatsu up?

 

Is it broke or do I need css to align it?

 

 

Thanks,

 

Andy

Share this post


Link to post
Share on other sites
Jake

Hi Novsun - Hmmm...I just tested out locally and it is working as shown in the demo for me so something wonky may be going on. It's possible that what you're experiencing is the browser acting responsive and moving the image below the text as a result. Is your browser maximized? If not, does that make a difference?


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
novsun

Ok, that is possible, but I did try it on both of my monitors(macbook pro and cinema display) maximized browsers, plenty of space on both sides.

 

AND when i turned off the Reverse Image and Text I don't get the same result. Which makes me think it's only that setting that has a spacing issue.

 

And that is kind of a wonky responsive result...

 

Thanks for the quick feedback!

 

Andy 

Share this post


Link to post
Share on other sites
Jake

Hey Andy - yeah I couldn't get it the problem to replicate on my end with image on the left unless I minimized the browser a bit and then the image did drop down. What version of DMS are you on? It may be possible to tweak the padding/margin around the image to make it work for you if you want to post a link I'll see if I can help further.


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
novsun

At this point, for the sake of time I have just turned off the reverse image. It still looks nice, just not necessarily what I had in mind originally.

 

Here is the link:

http://integriteez.novsun.com/services/

 

I am very grateful for the quick response and feedback.

 

I do have a few other questions about customizing a menu. I'll post them in another thread.

 

Thanks

Andy 

Share this post


Link to post
Share on other sites
novsun

Also, isnt the image suppose to scale instead of bumping down? and when it does bump down it should go under the text or over the text right?

 

 

 

 

 

Andy 

Share this post


Link to post
Share on other sites
Rob

Andy,

 

To be candid, many people think DMS (and Framework) scale images automagically.  That's not true, and if it were, the big problem is that not all browsers handle scaled images well.  Unfortunately, IE, for example, doesn't even like scaled featured images or post images.  It will display them full size causing all sorts of mishaps.

 

I recommend to everyone, try to avoid scaling images whenever, wherever possible.  In Framework, I even told people to forget aspect ratio because of the same issue. Bottom line, a static image you resize in a graphics editor is always best.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
alanslingsby

I am having the same problem when reversing the image/text order, even with images that have been sized not to scale.

It can be overcome by choosing two widths that do not total 100 — 66% and 25%, for instance.

Could there be a simple way to use widths that total 99%?

Share this post


Link to post
Share on other sites
Rob

Okay, let me clarify...

 

If you have the image space for Hero at 25%, your browser will understand that to be a variable volume of pixels.  If the total available is 1000 (for a round number) then 25% might be 250px.  BUT, then again, it may not be.  If you add an image 250px wide, let's say, then there's no flexibility, If the image's value in pixels is more than 250px the browser will wrap the element to the next line, allowing it to expand to meet the dimensions of the container... or, 250px or 25%.

 

DMS will not scale the images.  So, best bet here is, do the math.  You can tell how wide the content area is. And you can deduct from that value, any padding you've set.  So, if you added 10px padding, then deduct 40px.  So, now we're down to 960 from my example of 1000, and 25% of that is 240.  To be perfectly safe, use an image of 220 in this scenario.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

I hope the info helps. :)


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • Similar Content

    • gsquared
      By gsquared
      For some reson, when I use Hero component and I reverse the Hero unit, the image drops down and is misaligned.    Even when I clone an existing Hero section that is aligned perfectly, but reverse it so the image is on the left hand side, this happens.   Within DMS it shows up as well: http://cl.ly/image/3020111B0p3D/Screen%20Shot%202014-03-03%20at%2012.19.31%20PM.png   When I view it in browsers, the only browser it looks right is Safari on Mac. In Firefox and Chrome, it looks like it does in DMS.   The site is http://cruise-offer.com/   Any ideas?   Wordpress v 3.8.1 Pagelines DMS v 1.1.6
×