Not displaying responsive on mobile

Hi,

Thank you for using Enfold.

1.) I checked the home page and it looks responsive. Is this fixed? If it is not fixed yet, please provide a link to the page with the issue and a screenshot if possible.

2.) Have you tried adding the text block inside a grid row element with a single cell?

3.) Please upload the video on youtube or vimeo. Here’s why: https://www.wp101.com/10-reasons-why-you-should-never-host-your-own-videos/

We would also like to apologize for the delay. We normally respond within 24 hours but in the wake of the latest theme update, we have received more inquiries than usual. Please be patient while we go through the rest of the queue. Thank you for your understanding.

Best regards,
Ismael

Hi,

I see. Thank you for the info.

1.) Please add this code to reduce the font size on smaller screens.

@media only screen and (max-width: 989px) {
    h1 {
        font-size: 30px;
        line-height: 1.1em;
        margin-bottom: 14px;
    }
}

Adjust the values as needed.

2.) Please edit the title, add a custom css class attribute to the span tag.

<span class="tevelady_title"style="color: #6265a6;" >Tevelady</span>
<span class="tevelady_title" style="color: #9a1e1e;">MEDIA</span>

Add the following css code afterwards.

.tevelady_title {
    display: inline-block;
}

Best regards,
Ismael

Hi,

Yes, that’s the text block that you need to modify. Add the css class attribute to the span tag containing the title “Tevelady” and “MEDIA”.

Best regards,
Ismael

Hi,

Please add a grid row element, set it to a single cell then move the video inside.

Best regards,
Ismael

Hi,

Have you tried using the color section or the full width/screen slider? You can add the video as background.

Best regards,
Ismael

Hi,

Also in addition to my previous question, they have a new problem and that’s when they put the link of http://www.teveladymedia.com in twitter it comes up with This is a page excerpt, it will be displayed for search results with a blurry logo.

Please install an SEO plugin like Yoast and adjust the meta data of the page. I checked the markup and the open graph data looks fine.

  <meta property="og:locale" content="en_US"/>
  <meta property="og:site_name" content="Tevelady MEDIA"/>
  <meta property="og:title" content="Home"/>
  <meta property="og:url" content="http://www.teveladymedia.com"/>
  <meta property="og:type" content="website"/>
  <meta property="og:description" content="We specialize in video development & production, storytelling & content creation, marketing & public relations. Strategizing • Digitizing • Sharing"/>
  <meta property="og:image" content="http://www.teveladymedia.com/wp-content/uploads/2017/08/LogoVO8LvRxw_400x400.jpg"/>
  <meta property="article:publisher" content="https://www.facebook.com/teveladymedia"/>
 <!-- Google+ / Schema.org -->
  <meta itemprop="name" content="Home"/>
  <meta itemprop="description" content="We specialize in video development & production, storytelling & content creation, marketing & public relations. Strategizing • Digitizing • Sharing"/>
  <meta itemprop="image" content="http://www.teveladymedia.com/wp-content/uploads/2017/08/LogoVO8LvRxw_400x400.jpg"/>
 <!-- Twitter Cards -->
  <meta name="twitter:title" content="Home"/>
  <meta name="twitter:url" content="http://www.teveladymedia.com"/>
  <meta name="twitter:description" content="We specialize in video development & production, storytelling & content creation, marketing & public relations. Strategizing • Digitizing • Sharing"/>
  <meta name="twitter:image" content="http://www.teveladymedia.com/wp-content/uploads/2017/08/LogoVO8LvRxw_400x400.jpg"/>
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:site" content="@teveladymedia"/>

The description looks correct.

Best regards,
Ismael

Hi,

So you are advising to create a color section box and then add the video background inside the color section?

There’s a tab in the color section element called “Section Background”. Add the video url there and then go to the Screen Options settings. Enable all options except for the first one so that the element is hidden on mobile view. Next, add a video element next to the color section, add the same video url then go to the Screen Options settings again. Enable the first option (Hide on large screens (wider than 990px – eg: Desktop)) to prevent the video from displaying on desktop view. You’ll have two video elements, one for desktop and another for mobile view.

Best regards,
Ismael