-
AuthorPosts
-
April 23, 2017 at 7:33 pm #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, 7 months ago by moniot.
April 23, 2017 at 9:42 pm #782058Hey 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; } }
Best regards,
MikeApril 24, 2017 at 2:16 am #782106Hey 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 #782107Hi,
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,
MikeApril 24, 2017 at 4:09 am #782116Hey 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 #782434OR — 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 #782993Hi,
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,
VictoriaApril 25, 2017 at 9:03 pm #783099Hi 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 #783427Hi Rob,
If you remove this bit: .page-id-206, it should apply globally.
Best regards,
RikardApril 27, 2017 at 3:13 am #783754Hey 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 #783819Hi,
I apologize, but may you explain to me how do you want the text position?
Best regards,
John TorvikApril 27, 2017 at 7:36 pm #784174Hey 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 #784187Hi,
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 TorvikApril 27, 2017 at 9:37 pm #784217John, 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 -
AuthorPosts
- You must be logged in to reply to this topic.