Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #782020

    Hey gang!

    On my site the text always looks great, except that it covers my models faces on my iPhone 7. I’ve been trying to find a way to position the text on mobile devices in the lower left corner of each splash page. I think I’m close but I need your help…

    I found this bit of wisdom from y’all: https://kriesi.at/support/topic/controlling-content-on-mobile-in-the-enfold-theme/

    I tried it and it does indeed change my text on mobile, but I wonder if it’s possible to
    1. Add code to the css to get the text to position itself in the lower left corner of the first section?
    2. Make the text behave the same when the iPhone is in landscape mode? (Currently, it only changes the text when in portrait mode. I know it probably has to do with setting the width to a different value, but I have no idea what that value should be.)
    3. Also make the font a smidge smaller?

    THANKS!!!

    -Rob

    • This topic was modified 7 years, 8 months ago by moniot.
    #782058

    Hey moniot,
    Try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 767px){
    #top #wrap_all .av-inherit-size .av-special-heading-tag {
        font-size: 0.4em!important; }
    .av-special-heading.av-special-heading-h3 {
        right: 30%!important; 
        top: 140px!important;}
    .hr-inner.inner-border-av-border-thin {
        border-color: transparent!important; }
    }
    

    Please clear your cache :)
    postimage

    Best regards,
    Mike

    #782106

    Hey Mike, that worked except that it messed up all My H3 section titles on all my pages on mobile. How would I get around that? Just change all the H3 section titles to H2’s or something? Or is there a better way?

    (The terminology I’m using is remedial, I know….) : )

    Thanks

    Rob

    #782107

    Hi,
    We’ll add “page-id-206” to it to target only that page :)

    @media only screen and (max-width: 767px){
    #top #wrap_all .av-inherit-size .av-special-heading-tag {
        font-size: 0.4em!important; }
    .page-id-206 .av-special-heading.av-special-heading-h3 {
        right: 30%!important; 
        top: 140px!important;}
    .hr-inner.inner-border-av-border-thin {
        border-color: transparent!important; }
    }

    Best regards,
    Mike

    #782116

    Hey Mike

    Sorry to be a pain, but that doesn’t fix it. If you take a bit deeper look at the site you’ll see that I repeat this BIG MODEL FACE motif on all of my subpages, so the fix needs to happen site wide…

    But all of those subpages are “single page”, so the section headlines are all below the BIG MODEL FACES, and this happen seven times, site wide.

    Is there a way to target only the sections instead of the pages? Like, is there a section ID tag or something?

    Thanks so much for you help.

    -Rob

    #782434

    OR — is there a way to copy the Heading Style I’m using and use it in a new custom Heading Type? Like, add an H6 to the list that looks exactly the same but doesn’t mess up all the other H3’s because we aren’t referencing them?

    #782993

    Hi,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css or child theme styles.css

    
    @media only screen and (max-width: 767px){
    #top #wrap_all .av-inherit-size .av-special-heading-tag {
        font-size: 0.4em!important; }
    .page-id-206 .av-special-heading.av-special-heading-h3 {
        right: 30%!important;
        top: 22px!important;
        }
    .hr-inner.inner-border-av-border-thin {
        border-color: transparent!important; }
    
    #top #wrap_all .av-inherit-size.av-special-heading.av-special-heading-h3.avia-builder-el-8 .av-special-heading-tag,
    #top #wrap_all .av-inherit-size.av-special-heading.av-special-heading-h3.avia-builder-el-16 .av-special-heading-tag,
    #top #wrap_all .av-inherit-size.av-special-heading.av-special-heading-h3.avia-builder-el-56 .av-special-heading-tag,
    #top #wrap_all .av-inherit-size.av-special-heading.av-special-heading-h3.avia-builder-el-49 .av-special-heading-tag,
    #top #wrap_all .av-inherit-size.av-special-heading.av-special-heading-h3.avia-builder-el-75 .av-special-heading-tag
     
     {
        margin-left: 30%;
        top: 22px!important;
    }
    #top #wrap_all .av-inherit-size.av-special-heading.av-special-heading-h3.avia-builder-el-75 .av-special-heading-tag {
    	padding-bottom: 30px;
    }
    
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #783099

    Hi Victoria!

    Thanks, that worked in quick CSS but it only applied the changes to my home page, not all the pages, which have the same layout.

    How would we accomplish that?

    -Rob

    #783427

    Hi Rob,

    If you remove this bit: .page-id-206, it should apply globally.

    Best regards,
    Rikard

    #783754

    Hey Rikard

    That did the trick nicely, thank you — you guys have absolutely the best customer support I’ve seen.

    Is there anyway to change this css to lower the placement of the text just a tad? The text still blocks faces when in landscape mode.

    Gracias!!!

    #783819

    Hi,

    I apologize, but may you explain to me how do you want the text position?

    Best regards,
    John Torvik

    #784174

    Hey John

    In a perfect world, when viewing the site on the iPhone, the text would be in the lower left corner of the screen in both portrait and landscape mode, so that it doesn’t obscure the models faces (as much as possible.)

    Thank you!

    #784187

    Hi,

    You can change the text position with this custom CSS code:

     @media only screen and (max-width: 481px) {
        /* For mobiles */
        .av-special-heading-tag {
            position: relative;
            bottom: 255px;
            left: 83px;
        }
    }
    

    You can change the position just changing the bottom and the left value.

    Best regards,
    John Torvik

    #784217

    John, do I add that CSS to the previous code that Rikard and Victoria gave me? (See above in the thread) Or replace it entirely?

    Thanks

    #785369

    Hi,
    Try adding it below the other css.

    Best regards,
    Mike

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.