Jump to content

Archived

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

BentleyD

Hero images not inline

Recommended Posts

jmad+    80
jmad

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.

Share this post


Link to post
Share on other sites
BentleyD+    2
BentleyD

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

Share this post


Link to post
Share on other sites
jmad+    80
jmad

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.  

Share this post


Link to post
Share on other sites
BentleyD+    2
BentleyD

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!

Share this post


Link to post
Share on other sites
BentleyD+    2
BentleyD

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.

Share this post


Link to post
Share on other sites
jmad+    80
jmad

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? 

Share this post


Link to post
Share on other sites

  • Similar Content

    • StuLeeUK
      By StuLeeUK+
      Good morning,
      I have set up my homepage using the Elements sections, a Masthead at the top and then a selection of Heroes lower down.
      I only just realised that the Heroes set a H1, as does the Masthead.
      Is there an easy way I can change the Heroes to an H2/H3 etc so as to improve the structure of my headers, whilst keeping the Masthead as H1?
      I really don't know much at all about CSS, which is why I use Pagelines because it's just so easy to create good looking pages without too much confusion.
       
      page for reference is https://www.avangocouriers.co.uk
      Thanks,
      Stu
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have noticed that all thumbnails on www.michaelkummer.com are scaled down in CSS or HTML, rather than on the backend by Jetpack's Photon. See https://db.tt/vNJCn7Gh and https://db.tt/3ZpkHM7G. 
      Any idea why Pins sets the image width and height to something much larger than what's shown on the screen? Is there any way to fix this so that Photon can do a better job in rescaling the images on the backend before they are delivered to the browser?
      Thanks
      Michael 
    • floydwebb
      By floydwebb+
      The parallax and hero sections are jumping to the top of the template in PL5 See  here http://screencast.com/t/TLajih8MEM6
      No matter what I do, clear browser cache, whatever. The Parallax with the embeddded Hero section will ot stay on the bottom of the page above the footer.
      Help, please. This started happening at the worst possible time, when I was in a client meeting walking here through the site that is already LATE. 
      Floyd Webb
    • sfmstudios
      By sfmstudios+
      I'm using the boxes section on a local development site to play around with some options, and running into an issue.  
      Have the following settings for the boxes:
      Type: Images/SVC Media on Top Image Appearance: Standard/Default Image/Icon Width: 280px Image Opacity: 100% Each of my box images is 280x150 in size, but the result of the image on the box is a strange zoomed-in, cropped square (see attached).  I looked to adjust border properties via CSS, but couldn't find a fix.  What solutions are out there?

    • richardjacruz
      By richardjacruz+
      I received our monthly Alexa report, and it pointed out that there were missing alt tags on EVERY page on our site. Upon closer inspection, it looks like the QuickSlider which is used for the scrolling banners at the top of the site doesn't bring in the alt tags. Recently, you made a change to the RevSlider to allow images to have "alt" tags. Can you do that for the QuickSlider too?
      Thanks.
×