Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 15, 2015 at 7:46 pm #380346
    dlgould98

    Hi there!

    Using Enfold theme and having an issue with the logo and navigation bar overlapping when viewed in browsers on a pc or mobile devices like the ipad. It displays OK on a MAC and in various mac browsers.

    Set the mobile header settings and added some custom css I found in another forum support post, but it’s not making a difference.

    Site address is http://www.openheartcreative.com/.

    Thank you!

    January 15, 2015 at 7:47 pm #380351
    Yigit

    Hey dlgould98!

    Please go to Enfold theme options > General Layout > Dimensions and check “Responsive Site”. You are currently using fixed layout

    Regards,
    Yigit

    January 15, 2015 at 8:18 pm #380377
    dlgould98

    Thank you! I did that yesterday, and cleared cache on my browser but the same issue exists. I just checked it off again, but still same issue with the site display on PCs in both Explorer and Chrome browsers and ipad.

    Looks good on iphone.

    Thank you.

    January 15, 2015 at 8:23 pm #380383
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 1200px) and (min-width: 990px) {
.av-main-nav > li > a { padding: 0 6px; }
.logo * { max-width: 84%; top: 5px; }}

    Regards,
    Yigit

    January 15, 2015 at 9:15 pm #380435
    dlgould98

    That looks better. I’m still having a display issue in the Explorer browser on a PC, but everything else looks good.

    One other issue. On the front page sliders, the text on the second slider image, COLLABORATION is overlapping part of the image. It’s supposed to sit below the hearts. The text on all the other sliders appears fine.

    Thank you!

    January 15, 2015 at 9:22 pm #380447
    Yigit

    Hey!

    Please try adding following code to Quick CSS 

    @media only screen and (max-width: 1380px) and (min-width: 1260px) {
.avia-caption-content p {
font-size: 44px!important;
}}
@media only screen and (max-width: 1259px) and (min-width: 1024px) {
.avia-caption-content p {
font-size: 32px!important;
}}

    Best regards,
    Yigit

    January 15, 2015 at 10:11 pm #380489
    dlgould98

    Thank you that is working. Question… the words on the sliders are now very small in display rather than the size they were originally in relationship to the image, even on the PC and big screen.

    Is there a way to adjust the lettering to be larger but to solve the previous issue.

    Thank you.

    January 16, 2015 at 10:03 am #380655
    Ismael

    Hey!

    Try to adjust the font size values on the css code:

    @media only screen and (max-width: 1380px) and (min-width: 1260px) {
.avia-caption-content p {
font-size: 70px!important;
}}
@media only screen and (max-width: 1259px) and (min-width: 1024px) {
.avia-caption-content p {
font-size: 50px!important;
}}

    Cheers!
    Ismael

    January 20, 2015 at 12:02 am #382185
    dlgould98

    Thank you Ismael!

    We are really good shape except on the iphone display. The font size in relationship to the image looks great on the ipad, but it’s super tiny and out of position on the iphone, even with the font size adjustments.

    Thank you so much.

    January 21, 2015 at 1:11 am #382800
    dlgould98

    We have not yet received a reply to our last question posted.

    January 21, 2015 at 8:00 pm #383305
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 479px) {
.responsive #top .slideshow_caption .avia-caption-content {
font-size: 17px !important;
top: 27px;
position: relative;
}
.avia-slideshow-dots.avia-slideshow-controls { display: none; }}

    Best regards,
    Yigit

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