Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • March 10, 2018 at 7:24 am #924851
    Blanche

    Hi Enfold Team,
    I have been combing through this topic for about 6-hours and have tried 20 different Quick CSS fixes and nothing has worked yet. It’s probably something that must have a simple fix and I am just perhaps overlooking it … I have color sections on every page of my website and ALL of them include images, however not one of the images are responsive on my iPhone – they are large and distorted. I have tried every possible quick css code that I have found during my search and nothing worked – I finally deleted it all as to not break anything. I have included several screen shots in the private section. Additionally and in the same world – on each page of my site, the header copy on the image is cut off on the iPhone – I can start a different thread for that however since we are discussing mobile issues … All is included in the private section.

    Thanks in advance for your assistance!

    March 11, 2018 at 6:40 am #925152
    Rikard

    Hey Blanche,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.home .slideshow_caption {
   padding-top:0 !important;
}
}

    Best regards,
    Rikard

    March 12, 2018 at 8:01 pm #925698
    Blanche

    Hi Rikard,
    Thank you – The Home page header looks better however the headers on all the other pages still have the issue of the words being cut off on the iPhone – see image in private section.

    Additionally, the images in all of my color sections within the body of each page (not headers) are still distorted and not showing – image is included on same slide in private section.

    Thank you in advance for your help – really appreciate it very much!
    ~Cheers

    March 13, 2018 at 9:04 am #925941
    Rikard

    Hi,

    Thanks for the feedback. Please replace the CSS I sent previously with this, to see if that helps with the other sliders:

    @media only screen and (max-width: 767px) {
.slideshow_caption {
   padding-top:0 !important;
}
}

    Best regards,
    Rikard

    March 30, 2018 at 2:34 am #935088
    Blanche

    Hi Rikard,
    Thank you, that seemed to work just fine for my headers however the issue of the images within the various color sections on each page are still not optimizing for mobile. Please see the image to the right on the slide via the link in the private section. Thank in advance for your assistance!
    ~Cheers

    March 30, 2018 at 10:19 am #935208
    Victoria

    Hi Blanche,

    Can you disable caching and minification for now?

    Best regards,
    Victoria

    March 30, 2018 at 11:29 pm #935476
    Blanche

    Hi Victoria, I believe I have disabled the caching & minification plug-ins.

    Please let me know next steps … Thank you!!
    ~Cheers

    April 2, 2018 at 7:26 am #935928
    Victoria

    Hi Blanche,

    I see that the Autoptimize is still on, can you please disable it for now, so that I can test a css solution for you?

    Best regards,
    Victoria

    April 2, 2018 at 10:56 pm #936220
    Blanche

    So sorry Victoria, it appears a couple of the plugins did not disable – they should all be disabled now.
    Apologies again.

    Thanks in advance for your assistance!
    ~Cheers

    April 3, 2018 at 9:45 am #936410
    Victoria

    Hi Blanche,

    Thank you.

    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

    

@media only screen and (min-width: 768px) and (max-width: 990px) {
  .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
    padding-top: 50px;
  }
}

@media only screen and (max-width: 479px) {
  .avia-slideshow-inner {
    height: 290px;
  }
  .av_slideshow_full li img {
    height: 290px;
    width: 175%;
    max-width: inherit;
  }
  #top .avia-slideshow-button.avia-color-light {
      padding: 7px 10px;
      margin-top: 15px;
  }
  .avia-multi-slideshow-button.avia-slideshow-button {
      margin-right: 10px;
  }
  #top .avia-slideshow-button.avia-color-light.avia-button {
      font-size: 18px !important;
  }
  .responsive #top .slideshow_caption h2 {
    font-size: 26px !important;
 }

}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 9, 2018 at 8:21 pm #939394
    Blanche

    Hi Victoria,
    Sadly, adding it to the Quick css did not work … and now my entire site on desktop is a bit messed up – header image, boxes, menu … I do not know how to add css into the actual theme files … I was really hoping that images could be responsive on mobile within a color section via quick css without modifying the theme files. Any other assistance you can give? Thank you – this is so frustrating – absolutely LOVE this theme, just need a couple of tweaks to get images to be responsive throughout my site on mobile devices!
    Thank you in advance!
    ~Cheers

    April 10, 2018 at 1:50 am #939525
    Blanche

    hi there, my menu (fly-out) is now not working properly … I have made changes to the colors in advanced styling to try to get it to be
    visible – however it’s just a big green box … if you scroll over the menu items, they will show up however they are not visible when you bring the menu up …
    Thanks.

    April 10, 2018 at 12:14 pm #939824
    Victoria

    Hi Blanche,

    The code I gave you does not affect the burger flyout, it was probably something set in theme options and not saved and now that you saved you got that result. The code below will make the menu text white for you.

    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

    
.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul a {
    color: #fff;
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    April 10, 2018 at 5:38 pm #939952
    Blanche

    Hi Victoria,
    Thank you – the code above did not work to change the font color to white in the burger fly-out menu and as I mentioned, I do not know how to make changes to the theme files. Not sure why I can’t change the font color back to how it was before – I have it correct in the advanced styling section – any other way to make the font white upon first look?
    Thank you.
    ~Cheers

    April 11, 2018 at 10:02 am #940342
    Victoria

    Hi Blanche,

    Can you please post your credentials again, please?

    Best regards,
    Victoria

    April 11, 2018 at 6:58 pm #940613
    Blanche

    Hi Victoria,
    Credentials are listed in the private section.
    THANK YOU!
    ~Cheers

    April 13, 2018 at 12:07 pm #941437
    Victoria

    Hi Blanche,

    The code worked when I put it on top of all other code in Quick css and it works, there must be a syntax error at some point there and the rest of the styles do not work. You might want to validate all your css from Quick css.

    Best regards,
    Victoria

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