Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 31, 2015 at 1:40 am #481050
    WP Turned UP

    Hello. I’m having trouble with the landing page and centering a Special Heading. When I put up at Special Heading and choose to center it…it only centers it on my iPhone. It aligns to the left on any browser I use on the desktop.

    This is what I’m looking to do and it should be much simpler.

    Centered – White Text – Size 50: “Pace Maryland”
    Centered – White Text – Size 20: “Providing Clean Energy Solutions to the State of Maryland”

    I need this to be responsive too, but I can’t get it to be responsive. On my iPhone I feel like this text size should be shrunk yet still readable in the center of the page.

    Thank you,
    Ryan

    • This topic was modified 8 years, 8 months ago by WP Turned UP.
    July 31, 2015 at 10:52 am #481242
    Rikard

    Hi rlogan2334,

    Inspecting the page I’m seeing this being applied to the container elements as inline CSS:

    #top.page-id-24 #av_section_1 .av-special-heading {
    background-color: transparent;
    height: 87px;
    width: 674px;
}

    I’m not sure where it’s coming from but if you remove that it will give you the results you’re looking for.

    Cheers!
    Rikard

    July 31, 2015 at 4:32 pm #481459
    WP Turned UP

    Thank you! That did the trick with the centering.

    Now, I just need to get a grasp on Enfold’s responsiveness. Rather that write down what I’m after, perhaps I can just show you. If you look at this site, you’ll see the look I’m after. Basically, replace Greenworks Lending with Pace Maryland and replace their slogan with mine. I want the Special Heading to be BIG and the slogan to be pretty good size underneath. When you look at the Greenworks site on iPhone (portrait mode), everything shrinks down great. With my site on Enfold, I can’t have the Special Heading be any greater than 60px, before things start to get ugly.

    Is there a setting I can put into Quick CSS that would help the mobile device show this content better?

    Thanks again,
    Ryan

    August 3, 2015 at 6:21 am #481881
    Ismael

    Hey!

    You can set the font size on mobile device with this:

    @media only screen and (max-width: 767px) {
.av-inherit-size .av-special-heading-tag {
    font-size: 1em;
}}

    Cheers!
    Ismael

    August 3, 2015 at 3:18 pm #482137
    WP Turned UP

    Thanks, but I didn’t see any difference on the Special Heading. I also needed this to include the slogan (simple text box) underneath the Special Heading. So, I looked up what you sent me to try and figure it out for myself. Right now, the page looks exactly how I want, in terms of font size on regular desktop/laptop displays.

    Here is what I have right now, trying to get this to work on my iPhone in portrait and landscape mode.

    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 568px)
    and (orientation : landscape) { .av-inherit-size .av-special-heading-tag {
    font-size: 1em;
    }}

    Thanks again!

    August 4, 2015 at 7:36 am #482532
    Ismael

    Hey!

    Where did you add this code? 

    #top.page-id-24 #av_section_1 .av-special-heading .av-special-heading-tag {
    font-size: 100px;
    line-height: 43px;
}

    Please add all css modifications in the Quick CSS field or the child theme’s style.css file.

    Cheers!
    Ismael

    August 4, 2015 at 4:01 pm #482769
    WP Turned UP

    Thanks. Feel free to close this ticket. I was mixing CSS Hero settings with Quick CSS…no good. Using CSS Hero was extremely easy to get all the settings in place.

    Thanks again!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Landing Page Issues’ is closed to new replies.