Jump to content

Archived

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

jmad

Hero Image crowding text when reversed to left

Recommended Posts

jmad

I'm using a hero component in DMS2 but when I reverse the image to the left it doesn't send it out to the left edge but keeps it to the center.  Is this the expected behavior, should I adjust with CSS?

Share this post


Link to post
Share on other sites
Danny

Hi,

 

This isn't happening for me - https://cloudup.com/cOe2SGvjWCQ

 

Can we have a link to your site please, so we can see the exact issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

I messaged you (hello @ pagelines) the site as the client doesn't want site shared until it is 100% finished.  

Share this post


Link to post
Share on other sites
jmad

Did you take a look at this?

Share this post


Link to post
Share on other sites
Danny

Yeah I can see the issue, add the following to your custom CSS

 

/* Fixes image alignment for reversed hero */

.pl-hero-reverse .hero_image {
text-align: left;
}
 

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Danny,

 

This fixes the crowding issue but then creates problems for the text position as the browser rescales.   I have both options with your css added.  Take a look and you will see the issue.

Share this post


Link to post
Share on other sites
Danny

I have viewed your site and I see no issue, when I reduced the browsers width ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Really?  Because at 1095px wide the image on the left moves down a row and the text does not.  You have to be seeing the same thing.  

Share this post


Link to post
Share on other sites
Danny

Yeah it is not doing it on my end which is rather odd, but I clearly see the issue on your site. Add the following:

 

#site .pl-hero-reverse .pl-hero-image {
margin-right: 20px;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Is using the reverse hero just a bad idea?  Below is the only css I have on the site so far.  The reverse hero still adjust the text oddly and the image doesn't center on smaller screens.  

 

/*Anti Alias*/
html, html a {
    -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
 
/* Fixes image alignment for reversed hero */
.pl-hero-reverse .hero_image {
text-align: left;
}
 
#site .pl-hero-reverse .pl-hero-image {
margin-right: 20px;
}

Share this post


Link to post
Share on other sites
Danny

There is an issue with Hero reverse as I mentioned above, I have reported it to our tracker.

I have also tried viewing the site URL you provided via the email to our desk and I unable to find any Hero section on that site. Can you provide a link to the page in question and also what device are you seeing the problem on with smaller screens ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Danny,

 

I'm under some deadlines on the project so I dropped the Hero and just used text boxes.  I like Hero because how the photo and text arrange on smaller screens...something I haven't duplicated with text boxes unless I hide/show duplicated but differently positioned text boxes.  

 

Thanks.  Call it resolved.

Share this post


Link to post
Share on other sites
Danny

OK, thanks for letting us know. The Hero section will be fixed, but there is no ETA.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

No worries.

Share this post


Link to post
Share on other sites
jmad

Danny

 

It's been a while on this.  Any fix in the near future?

Share this post


Link to post
Share on other sites
Danny

I've just bumped the tracker for that issue again on your behalf.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×