Jump to content


Photo
- - - - -

Hero images not inline

hero images align

  • Please log in to reply
7 replies to this topic

#1 BentleyD

BentleyD

    Super Member

  • Members

  • 155 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 06 March 2014 - 08:35 PM

I'm working on this page:

 

http://freshjuiceglo...ename=alliances

 

For some reason the images are all the sudden not inline with the text and button. Do you know what's going on?



#2 batman

batman

    Bat Learning

  • Members

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

Posted 06 March 2014 - 10:01 PM

HI @BentleyD

Please, you can see this

http://forum.pagelin...versed/?hl=hero

Perhaps resolve the issue for now



#3 jmad

jmad

    Advocate

  • Members

  • 897 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 06 March 2014 - 10:35 PM

@BentleyD

 

I might just use a text box and media box combination.  It' would give you the same flexibility and if you wanted you could add animation.  Just drop a button shortcode in where you need it.



#4 BentleyD

BentleyD

    Super Member

  • Members

  • 155 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 06 March 2014 - 11:41 PM

This has been implemented on my site for a month and randomly switched. I shouldn't have to add css to something that has been working for a month.@jmad@batman



#5 jmad

jmad

    Advocate

  • Members

  • 897 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 07 March 2014 - 12:10 AM

@BentleyD Sorry man, just trying to help and yes I understand that is frustrating.  Did you do any DMS upgrades or...and I know this is likely but it happened to me once...accidentally reduce your page width?

 

I don't know otherwise, was just offering a possible fix.  



#6 BentleyD

BentleyD

    Super Member

  • Members

  • 155 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 07 March 2014 - 12:27 AM

@jmad I appreciate the help man. I'm just super confused why it's messed up. Maybe I did accidentally movie the page width. I'll give it a look!



#7 BentleyD

BentleyD

    Super Member

  • Members

  • 155 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 07 March 2014 - 12:31 AM

@jmad Thanks man. That was actually what happened. I must have accidentally moved the width the smallest amount. I didn't even think about that.



#8 jmad

jmad

    Advocate

  • Members

  • 897 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 07 March 2014 - 01:18 AM

@BentleyD  No worries.  It might still happen as you scale your browser window but that's a whole other can of worms...I looked at your site and it's still out of position when you resize your browser....if you are up for it...  Offering this because I had a very specific thing I tried to do with the Hero that nearly drove me crazy.  

 

Add a media box with your item and center it using the box.  Add a text box and don't select anything in the text alignment area.  Add your text to the text box and a <br /> then  [pl_button type="primary" link="" target="blank"]Primary[/pl_button]  adding your own link info and such. 

 

Then add the class below to your css and center-mobile to your text box class.  

 

@media (max-width: 768px){

  .center-mobile{
    text-align: center;
  }
}
 
This should make everything fall inline (vertically) once screen size hits 768 (change to whatever meets your needs).  If you left align your textbox text then I think the CSS would need altered slightly.  Also since your images are on the left side of the text they are going to slide above the text as the browser window shrinks.  
 
There is a way to make this all happen using the Hero as well but I haven't worked with it recently...the advantage would be using the hero the image can fall below...I haven't been able to make that happen with text/media boxes.    
 
Probably more info than you wanted...I recently worked on a similar issue so it was fresh in my mind.
 
Like your site by the and noticed that your fonts are fairly consistent across browsers.  Did you add code to assist in keeping them similar or did it just happen to be the font you selected worked well? 






Also tagged with one or more of these keywords: hero, images, align