Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 23, 2016 at 11:53 pm #637174
    evan_friedl

    So a while back I requested help on getting borders to snap around text on the special headings. I got the suggestion to use span instead of div so that it snaps around the text. There is a problem that I did not realize. On mobile it does something funky when the text wraps to the next line.

    http://prntscr.com/b7mf4e

    Can you offer some suggestions?

    May 24, 2016 at 3:59 pm #637559
    Yigit

    Hey evan_friedl,

    Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Yigit

    May 25, 2016 at 12:23 am #637818
    evan_friedl

    Certainly

    on this page: http://srea.co/about/ Its toward the bottom and if you shrink the width of the browser you can see what it does.

    We also did it on these two pages:

    Who We Serve

    Services

    Here is the original post I made on this very subject:
    https://kriesi.at/support/topic/special-headings-and-css-borders/

    • This reply was modified 8 years, 7 months ago by evan_friedl.
    May 25, 2016 at 12:52 pm #637988
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 767px) and (min-width: 480px) {
div .heading-border {
    float: left;
}}

    Best regards,
    Yigit

    May 27, 2016 at 8:48 am #639165
    evan_friedl

    That helps but it looks a bit silly floating all the way to the left while the rest of the content is centered:

    http://prntscr.com/b8ytnm

    Any other ideas?

    May 27, 2016 at 3:51 pm #639341
    Yigit

    Hi,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • the URL to the login screen
    • a valid username (with full administration capabilities)
    • as well as a password for that username

    Best regards,
    Yigit

    May 27, 2016 at 5:23 pm #639406
    evan_friedl

    Here you go

    May 30, 2016 at 5:07 am #640095
    Ismael

    Hi,

    Did you check this on an actual mobile device? Or did you just resize the browser until you reproduce the issue? It only happens when the screen reaches 290px which is way smaller than the smallest screen sizes to date. Anyway, if you really need to fix that, add this in the QuicK CSS field:

    @media only screen and (max-width: 320px) {
.av-special-heading-tag {
    font-size: 16px !important;
}
}

    Best regards,
    Ismael

    May 30, 2016 at 4:40 pm #640481
    evan_friedl

    Ismael YES I have tried it on my Samsung Galaxy Note 4 which is a fairly large phone and it still does that on my phone on the services page and the who we serve page. They are fairly longer headers too.

    May 31, 2016 at 12:40 pm #640880
    Andy

    Hi,

    clear browser cache and your device and refresh the site a few times. The code Ismael provided to you should work fine. Check on another device as well.

    Best regards,
    Andy

    June 2, 2016 at 1:16 am #641768
    evan_friedl

    I did as you asked and I cleared my browser cache and it still is doing it on my Note 4 in portrait mode. We also tested it on a iphone. It still was doing the same thing.

    So I was looking at the toggle/accordion box and it was doing what we needed for these boxes. So I made some css experiments and finally got something so its at least decent looking across all browsers/sizes and squishing.

    This was the code for it and even though it says div there I used spans around my actual special headings.

    div .heading-border{
border-style: solid; 
border-width:2px; 
padding: 5px;
border-color: #666666;
text-shadow: 1px 1px 5px #ffffff !important;
}

div .heading-border2{
border-style: solid; 
border-width:2px; 
padding: 5px;
border-color: #FFFFFF;
box-shadow: 1px 1px 5px #1e4371 !important;
}

@media only screen and (max-width:1064px) and (min-width: 320px) {
div .heading-border{
border-style: solid; 
border-width:2px; 
padding: 5px;
border-color: #666666;
text-shadow: 1px 1px 5px #ffffff !important;
width: 100%;
    float: left;
    display: block;
    margin: 0 0 -2px 0;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: -2px;
    margin-left: 0px;
    padding-bottom: 1px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
}

div .heading-border2{
border-style: solid; 
border-width:2px; 
padding: 5px;
border-color: #FFFFFF;
box-shadow: 1px 1px 5px #1e4371 !important;
width: 100%;
    /*float: left;*/
    display: block;
    margin: 0 0 -2px 0;
    margin-top: 0px;
    margin-right::0px;
    margin-bottom: -2px;
    margin-left: 0px;
    padding-bottom: 1px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
}
}

@media only screen and (max-width: 320px) {
.av-special-heading-tag {
    font-size: 2.5vh !important;
}

}

    Thank you for trying to help I appreciate it.

    June 4, 2016 at 4:36 am #642809
    Ismael

    Hi,

    Could you please provide a screenshot of the issue again? This is what we see on our end: http://imgur.com/oZGI5R1

    Best regards,
    Ismael

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