Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 21, 2019 at 10:34 pm #1129791
    Dzimnikov

    Hi guys and gals,

    I’m almost done building a site for client, need some help finalizing a few things, some of them being mobile specific. Here goes:

    Website: greenmtnbowtag.com (login deets in the private content area)

    1) On the homepage (http://greenmtnbowtag.com/) the video at the top won’t autoplay on IOS devices. I checked the site on my friend’s Iphone, you get a still screen with a play button over it. You can’t press the play button naturally because there is text overlayed over it. Is there a way to get it to autoplay on IOS devices? Have yall ran into this problem before?

    2) This is a bit of nitpicky thing, but I don’t know how to edit it. On the INFO page (http://greenmtnbowtag.com/info), you get this on mobile: https://imgur.com/a/NfewvgJ
    There is a black bar that spills over from the top section with the helmet to the one below it. It doesn’t happen on desktop screens, so I’m not sure why it is on mobile.

    3) This one is a bit embarrassing, as you showed me how to code it for a previous website I built. I tried to re-appropriate the code, but it didn’t work for me. On the contact page (http://greenmtnbowtag.com/contact), I want to move the “travel all over” image above the contact form on mobile. It naturally moves left to right, but I want to switch those two on mobile. Here is what I tried, I wonder how close I am: 

    div#contactarea div.av-section-color-overlay-wrap {
  display: flex !important; 
  flex-wrap: wrap !important; 
  }
  #contactarea .flex_cell.conform {
      order: 2 !important; 
  }
  #contactarea .flex_cell.vermap {
      order: 1 !important; 
  }

    4) Remove “Enfold WordPress Theme by Kriesi” from the footer

    5) Also, for some reason, when I’m on the Pages section of the backend, I can’t clone pages – which is weird. Also, the two new pages I just published, “Privacy Policy” and “Terms of Use” are both being weird and aren’t being protected by https. I’m not quite sure why, almost seems as if the browser thinks they’re coming from a different website.

    Thank you so much for your continued help. I’ve learned a lot from yall and was able to style most of the site myself. Hopefully I keep getting better :)

    Cheers,
    -Daniel

    • This topic was modified 5 years, 3 months ago by Dzimnikov.
    August 23, 2019 at 7:19 am #1130224
    Mike

    Hey Dzimnikov,
    1: Sorry IOS blocks auto play on mobile devices, Apple has made many press releases about this, your best option is to adjust the text that overlays the play button so your visitors can press play on the video.
    2: The black bar is due to padding from the text above pushing down, to correct please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) { 
#infotophelmet > div > div.container > main {
	padding-bottom: 25px !important; 
}
}

    3: Your css was very close, please try this css instead:

    @media only screen and (max-width: 766px) { 
  #contactarea .entry-content-wrapper {
  display: flex !important; 
  flex-wrap: wrap !important; 
  }
  #contactarea .flex_column.first {
      order: 2 !important; 
      display: flex !important;
  }
  #contactarea .flex_column.vermap {
      order: 1 !important;
      display: flex !important;
  }
}

    Then clear your browser cache and check.
    4: To remove “Enfold WordPress Theme by Kriesi” from the footer, please add the [nolink] shortcode in the copyright field
    5: Your links to the “Privacy Policy” and “Terms of Use” are both “http” please change to “https”

    Best regards,
    Mike

    August 23, 2019 at 6:45 pm #1130467
    Dzimnikov

    Coolio, everything works. Thank you so much! Yet another reason to hate IOS and Apple in general. Do they ever make life easier…. never lol!!! Is there a way to make the text edit for just IOS devices? I’m going to try and find an IOS specific identifier and see if I can work some magic.

    Out of curiosity, how does this line of code work: “#infotophelmet > div > div.container > main {“? Why do you need to use “>” to identify the area? What does “>” mean in CSS, why couldn’t you just use the custom name of the section? I’m just trying to learn so I don’t have to ask yall so many questions.

    One last question. On the pages page, I can’t clone any of the pages, but I can on my other Enfold websites. Is there a setting I need to turn on somewhere to give me that functionality? Its incredibly useful for certain clients, like I have one thats a private chef that has a bajillion menu pages and cloning saves lives!

    Once again, thank you thank you thank you!!!

    Cheers,
    -Daniel

    • This reply was modified 5 years, 3 months ago by Dzimnikov.
    August 24, 2019 at 5:45 am #1130543
    Mike

    Hi,
    Glad to hear this helps,
    To target only IOS devices is a little tricky but it can be done, here are some articles:
    http://stephen.io/mediaqueries/

    Media Queries for Standard Devices

    The problem is that there is not just one way to do this for all IOS devices, you will need to use one solution for mobile devices and another for desktop Mac’s

    To understand the special symbols in css, please read this article:

    Understand ‘+’, ‘>’ and ‘~’ symbols in CSS Selector

    I was able to create a template of your frontpage:
    2019-08-23-233852
    this is what you ment by “clone” correct?
    Perhaps there is one page that is giving you an error, please tell us which page this is so we can take a look.

    Best regards,
    Mike

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