Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • April 23, 2017 at 7:33 pm #782020
    moniot

    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, 6 months ago by moniot.
    April 23, 2017 at 9:42 pm #782058
    Mike

    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

    April 24, 2017 at 2:16 am #782106
    moniot

    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

    April 24, 2017 at 3:19 am #782107
    Mike

    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

    April 24, 2017 at 4:09 am #782116
    moniot

    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

    April 24, 2017 at 4:38 pm #782434
    moniot

    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?

    April 25, 2017 at 5:17 pm #782993
    Victoria

    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

    April 25, 2017 at 9:03 pm #783099
    moniot

    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

    April 26, 2017 at 12:47 pm #783427
    Rikard

    Hi Rob,

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

    Best regards,
    Rikard

    April 27, 2017 at 3:13 am #783754
    moniot

    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!!!

    April 27, 2017 at 7:15 am #783819
    John Torvik

    Hi,

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

    Best regards,
    John Torvik

    April 27, 2017 at 7:36 pm #784174
    moniot

    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!

    April 27, 2017 at 8:24 pm #784187
    John Torvik

    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

    April 27, 2017 at 9:37 pm #784217
    moniot

    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

    April 30, 2017 at 7:24 pm #785369
    Mike

    Hi,
    Try adding it below the other css.

    Best regards,
    Mike

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