Okay
  Public Ticket #1308839
About/newsfeed pages
Open

Comments

  • lio119 started the conversation

    Hi,

    1. On this page: sakhr.co.uk/test2508/about, how do I make the text column width smaller on the right hand side (so that the text aligns with the edge of the videos).

    2. On this page: sakhr.co.uk/test2508/about, how do I remove the footer, the menu, the logo.

    3. On these pages: sakhr.co.uk/test2508/about and sakhr.co.uk/test2508/newsfeed, how do I add social icons to the header (the same ones that are on sakhr.co.uk/test2508/)

    4. There is some missing text at the bottom of some of the iframes on sakhr.co.uk/test2508/newsfeed. See screenshot.


    Attached files:  Screen Shot 2017-09-20 at 17.13.41.png

  •  982
    Qode replied

    Hi there, 

    1) It appears that you haven't used Visual Composer at all while editing this page: 

    https://www.screencast.com/t/zWKdVZHdhkgW

    Our recommendation is to use Visual Composer - that way you'll get more control over the content. Please navigate to your page admin and enable Backend Editor

    https://monosnap.com/file/0LyoTTJb3xQKIQgTdKnwXAZ49kvrIa

    After doing that, the text will be organized into Text Block elements. You can click to edit each Text Block and enter desired padding or margin via Design Options tab:

    https://www.screencast.com/t/gSeHRJbYlM5z

    This way you can control the text width. Just do not add large horizontal margins/padding in pixels (e.g. 100px or more) because of responsive mode. 

    2) You can remove the logo, menu & footer from this page by pasting the following code into Qode Options -> General -> Custom CSS field:

    .page-id-437 .logo_wrapper, 
    .page-id-437 .main_menu,
    .page-id-437 footer {
        display: none !important;
    }
    

    3) Check these instructions on how to add social icons into widget areas:

    http://bridge.qodeinteractive.com/documentation/6-header-setup/6-8-header-widgets/6-8-1-how-to-add-social-icons-into-header-top-or-header-bottom/

    4) As for the missing text, the content is inside < iframe > 

    https://monosnap.com/file/CYNW8yg6KTZR3GxfcIzFPgjLaKsg3r

    This is not one of the theme's features. It was probably generated by some third party plugin. Unfortunately we are not able to style < iframe > elements via CSS because they use separate stylesheets. If the element has been generated by third party plugin, please consult the plugin author. 

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • lio119 replied

    Thanks.

    1. The social icons are in the header on this page (top right) but they're not visible because they're white on white. I need the social icons to be white on the frontpage, but black on this page http://sakhr.co.uk/test2508/about/ how do i do that?

    2. I added the custom CSS but the menu button is still there: http://sakhr.co.uk/test2508/about/

    3. How do I keep the banner image as a strip instead of going all the way to the top? When I make the browser bigger, it expands to the top and looks ugly (see screenshots).

    Attached files:  Screen Shot 2017-09-21 at 21.57.44.png
      Screen Shot 2017-09-21 at 21.57.53.png

  •  982
    Qode replied

    Hello, 

    1) To make the header icons black on all pages except on the homepage, please insert the following code into Qode Options -> General -> Custom CSS field: 

    /* header icons in mobile header except homepage */
    body:not(.home) header .textwidget .qode_icon_shortcode {
    border-color: #000 !important;   /* border color */
    }
    body:not(.home) header .textwidget .qode_icon_shortcode .qode_icon_element {
    color: #000 !important;  /* icon initial color */
    }
    body:not(.home) header .textwidget .qode_icon_shortcode .qode_icon_element:hover {
    color: #000 !important;   /* icon hover color */
    }
    

    The result: 

    https://monosnap.com/file/5UAN9nSHo6QFO6XCOS6OmfmnhZUitB

    2) To remove the mobile menu button from the About page: 

    https://monosnap.com/file/bwCJUOl0LeFgRQRyhvvfDqoTByeS9z

    ...insert the following code into Custom CSS field: 

    .page-id-437 .mobile_menu_button {
        display: none !important;
    }
    

    3) The mobile header (screens below 1000px) is always opaque or non-transparent. The regular header (screens above 1000px) can be transparent or non- transparent. In this case, it's transparent and you want it to be non-transparent i.e. to have solid white background. 

    The general options to set the header background color and transparency are available in Qode Options -> Header.

    https://monosnap.com/file/n1VSdzuKdaehWRmks2bpPGZdOlbspN

    If you enter 1 under Header Transparency, the header will have solid color, if you enter 0 it will be fully transparent and decimal values like 0.5 will make it semi transparent: 

    https://monosnap.com/file/BaGsBR1JPCxhoKFoSV9InIEM6ZkeAi

    These settings will be applied to all pages/posts unless there is different setting on a particular page, because the local setting will override the general setting if it is different. So if you find that the general setting doesn't work on a particular page, go to your page admin -> Qode Header and check local settings. If you do not select anything in the page admin, the general setting will be applied. 

    https://monosnap.com/file/XbtTWlej1kNTkxPboL5bfp5noYHRtA

    For more info please check our documentation: 

    http://bridge.qodeinteractive.com/documentation/4-quick-setup/4-2-header/

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • lio119 replied

    Thank you, that all worked perfectly. Except on regular screens, I want a fixed banner, like I have on mobile screens. I don't want the image to move when I scroll (because before you start scrolling, it looks like my head is cut off!)

  •  982
    Qode replied

    Hello, 

    You are welcome. 

    A fixed banner is shown on all screen sizes under 1000px. 

    On screens >1000px the image is shown as background image. If you want to disable moving on scroll (i.e. to disable parallax effect) go to your page admin -> Qode Title -> set Parallax Background Image to No

    https://monosnap.com/file/RC07TEY2UpuAH8KkFlvyQA4yQWUYNZ

    Still in the page admin scroll up to Qode General section and make sure that Always put content below header option is set to Yes

    https://monosnap.com/file/LOopphT4tedVQU2nHIzlTvIK5gdAcD

    After that check the page. 

    Both options are available on global level, under Qode Options -> Title and Qode Options -> General. The global settings will be applied if there are no different local settings. 

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • lio119 replied

    Thank you, that looks much better. http://sakhr.co.uk/test2508/about/

    1 - How do I stop the title banner magnifying on bigger screen sizes?

    2 - How do I stop the social icons/header appearing as an overhang when I scroll down the page (on big screen sizes)?

    3 - The text is squeezed into a tiny, tiny column on mobile because of the padding I used in Visual Composer. How do I make the text column fit the whole width of the screen on mobile?

  •  982
    Qode replied

    Hello, 

    We are glad that we could help. 

    1) On screen sizes >1000px, the title area is 374px high. You can reduce Title Height setting in the page admin -> Qode Title: 

    https://monosnap.com/file/Ua86KcP31IDOBzEMaXQ0QDoXlbKJ4S

    The global Title Height option is under Qode Options -> Title. 

    For more info about title area setup you can check our documentation: 

    http://bridge.qodeinteractive.com/documentation/7-title-area/

    2) The icons appear as part of sticky header on scroll which is a normal functionality: 

    https://monosnap.com/file/c6pG6Hx4A02mhfmiRse6zfRBEGXvzJ

    If you want to stop the sticky header from appearing on this page, insert the following code into Qode Options -> General -> Custom CSS field: 

    .page-id-437 header.sticky {
      display: none !important;
    }

    3) Using large horizontal margins/paddings in pixel values is not recommended since it causes issues in responsive mode: 

    https://www.screencast.com/t/XW85wqzb8

    Please use percent values instead for large horizontal margins/paddings - in this case try with 12% or similar. That way, the margin/padding will adapt to smaller screen size. 

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • lio119 replied

    Thank you.

    1 - I edited the title height, but now the image is different on small and large screens. It is zoomed in too much on large screens so you only see the face (see screenshots).

    2 - This page doesn't work properly on mobile (landscape or portrait). The videos fall off the page: http://sakhr.co.uk/test2508/newsfeed/

    Attached files:  Screen Shot 2017-10-13 at 00.55.50.png
      Screen Shot 2017-10-13 at 00.56.00.png

  •  982
    Qode replied

    Hello, 

    1) The title image is background image and some cropping is inevitable on small screens. However, you can add the following code into Qode Options -> General -> Custom CSS field and check the page: 

    @media screen and (min-width: 1001px) {
       .title_outer .title {
         background-size: cover !important;
       }  
    }

    2) The videos have fixed width of 500px applied to < iframe > elements, that's why they are not displayed well in responsive mode: 

    https://monosnap.com/file/w3nF0kLeh7XBJb1JfQbKJGup20VFEy

    Also there is a large left margin in pixels - we do not recommend applying large horizontal paddings or margins in pixels because it does not work well in responsive mode, you should use percent values instead: 

    https://www.screencast.com/t/wkVQ33CeJ8a

    To remove this margin on mobiles and fix < iframe > width, insert the following CSS into Custom CSS field: 

    @media screen and (max-width: 767px) {
    .page-id-2 .wpb_text_column iframe {
      width: 100% !important;
    }
    .page-id-2 .vc_row .vc_custom_1506020598345 {
      margin-left: 0px !important;
    }
    }

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • lio119 replied

    Thank you, that worked but now there are big gaps between the posts (the iframes) on mobile:

    Attached files:  IMG_4911C4DE3A7C-1.jpeg

  •  982
    Qode replied

    Hello, 

    Are you referring to About page http://sakhr.co.uk/test2508/about/ ?

    We cannot reproduce such issue but it appears that the page content has been edited in the meantime: 

    https://monosnap.com/file/k84kacV1n3rsOy8KGaoIIsODK3GxiI

    We tried to access Newsfeed page too http://sakhr.co.uk/newsfeed and got 404: not found error. 

    If you find that the problem persists, please send us exact URL of the page and new screenshot. Also specify your mobile device and browser. Thank you. 

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • lio119 replied

    It's this page: http://sakhr.co.uk/newsfeed/

    I've tried using the iPhone 7 on Safari and Chrome. Both have gaps between the posts.

  •  982
    Qode replied

    Hello, 

    Please send us login URL and temporary WP admin access in a PRIVATE REPLY to take a closer look and try to help. 

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  •   lio119 replied privately
  •  982
    Qode replied

    Hello, 

    We have added a wrapper around each < iframe > element: 

    https://monosnap.com/file/UjZCnbe0rQVDjIIK241FXrxmywDpde

    ...like this: 

    <div class="custom_videowrapper">
    <iframe src="https://www.youtube.com/embed/videoseries?list=PLRGBtxcqfoRJ3ZIx01hCGZeYmT5RjU_46" width="500" height="281.232" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    </div>

    And we have replaced this CSS: 

    @media screen and (max-width: 767px) {
    .page-id-2 .wpb_text_column iframe {
      width: 100% !important;
    }
    .page-id-2 .vc_row .vc_custom_1506020598345 {
      margin-left: 0px !important;
    }
    }

    ...with the following: 

    @media screen and (max-width: 767px) {
    .page-id-2 .vc_row .vc_custom_1506020598345 {
      margin-left: 0px !important;
    }
    .custom_videowrapper {
       position: relative;
       height: 0;
       overflow: hidden;
       padding-bottom: 110%;
       padding-top: 25px;
       height: 0;
    }
    .custom_videowrapper iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
    }
    }
    

    You can check the page now. 

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • lio119 replied

    Thank you. So every time I add a new iframe to that page, should i use the same wrapper (div class etc). 

  • lio119 replied

    I can still see gaps between the posts on mobile. Here's the desktop version and the mobile version:

    Attached files:  Screen Shot 2017-10-20 at 11.09.31.png
      IMG_0213587AE577-1.jpeg

  •  982
    Qode replied

    Hello, 

    The < iframe > elements added using the embed code are not responsive, they have fixed width and height. Making them responsive is not easy and this custom solution is the best we can do. Adding wrapper around each < iframe > is necessary. You can reduce spaces on mobiles by adjusting padding-bottom value on this line of previous CSS code: 

    padding-bottom: 110%;

    Set it to 100% and check the page. 

    If you find that this does not work well, you can add videos to a page using the Video Player element available in Visual Composer. This element is responsive and it will work well on all screen sizes. 

    https://monosnap.com/file/ZevwieKtsyp9GO1ApXwbSAR6wzXVnu

    Video Player supports only Youtube and Vimeo videos. 

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • lio119 replied

    I don't see that line, I only see this:

        padding-bottom: 0 !important;

  •  982
    Qode replied

    Hello, 

    We are referring to this CSS: 

    @media screen and (max-width: 767px) {
    .page-id-2 .vc_row .vc_custom_1506020598345 {
      margin-left: 0px !important;
    }
    .custom_videowrapper {
       position: relative;
       height: 0;
       overflow: hidden;
       padding-bottom: 110%;
       padding-top: 25px;
       height: 0;
    }
    .custom_videowrapper iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
    }
    }

    ...on this line: 

    padding-bottom: 110%;

    ...you can apply different padding value, e.g. 100%

    This will work only if there are wrappers around the iframe elements, as specified below. 

    If this does not help, the best method would be to add each video to a page using the Video Player element in Visual Composer. This element is responsive. However, it supports only Youtube and Vimeo videos. 

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • lio119 replied

    Where are you seeing that CSS? I checked in Qode Options -> General -> Custom Code, but I don't see those lines.

  •  982
    Qode replied

    Hello, 

    We have checked your custom CSS via browser console (F12 in Chrome): 

    https://monosnap.com/file/daWO5Hrnern2gHSphyFeLUhWG3I8gA

    Here is your complete custom CSS: 

    http://sakhr.co.uk/wp-content/themes/bridge/css/custom_css.css?ver=1508423928

    This is definitely the code entered via Qode Options -> General -> Custom CSS field: 

    https://monosnap.com/file/CGAHESyhPrrhVAGeooNCk1NAcBjW6k

    Your login credentials provided below no longer work, so we cannot check this directly. 

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  •   lio119 replied privately
  •  982
    Qode replied

    Hello, 

    For whatever reason, the last CSS we have provided disappeared from Custom CSS field, and the old CSS (which should have been replaced with new CSS) re-appeared: 

    https://monosnap.com/file/InlnN6qb0E3mnBx4pRLe0eTBm2fQka

    We have replaced it with our new CSS: 

    @media screen and (max-width: 767px) {
    .page-id-2 .vc_row .vc_custom_1506020598345 {
      margin-left: 0px !important;
    }
    .custom_videowrapper {
       position: relative;
       height: 0;
       overflow: hidden;
       padding-bottom: 110%;
       padding-top: 25px;
       height: 0;
    }
    .custom_videowrapper iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
    }
    }

    Now the space is reduced, but this solution is not perfect and there is still a gap below this video because of different format (aspect ratio): 

    https://monosnap.com/file/zRoWmPISOhj4EpM4tlGZjazNDm0rqD

    Obviously it is not possible to make it perfect on small screens, because when < iframe > elements are added manually, they come with predefined size, and it is not possible to provide universal responsive fix for different video aspect ratios. 

    So we encourage you to try Video Player element instead. We have created this test page and added several Video Player elements via Visual Composer: 

    http://sakhr.co.uk/qodetest/

    For each Youtube/Vimeo video, select desired aspect ratio: 

    https://monosnap.com/file/2imlg1nDkONCF1Jfddz1zo9QfkvYHK

    These elements are responsive and no custom CSS is required. 

    https://monosnap.com/file/ZVkC45Wl4R10juJ8aTPnr3X2pqR1ea

    https://monosnap.com/file/EKB40DHL6Ovw5UuWYCL6qNk9pCoZ4K

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • lio119 replied

    Thank you very much for that. I can't use the Video Player element unfortunately because these are only Facebook videos. 

    Two questions:

    1 - I am going to regularly add extra iframes to that page. Should I just add the video wrapper to the iframe code on each one?

    2 - How many iframes is too many for one page? Will it slow the page down a lot?

  •  982
    Qode replied

    Hello, 

    You are welcome. 

    1) Yes, you have to put the code (opening and closing div tag) around each < iframe > element, like this: 

    <div class="custom_videowrapper">
    <iframe src="https://www.youtube.com/embed/videoseries?list=PLRGBtxcqfoRJ3ZIx01hCGZeYmT5RjU_46" width="500" height="281.232" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    </div>

    2) iFrames affect loading time and are somewhat costly, even when left blank when compared with other HTML elements. The biggest drawback is that they block the window onload event until complete, which can make the users perceive that the page they requested is slow. If your page include many iframe tags it will be slow due to load many pages. For more info see the following articles: 

    https://www.bayt.com/en/specialties/q/66713/does-iframe-affect-the-page-load-time-and-is-there-any-alternative-for-iframe/

    https://stackoverflow.com/questions/2323374/does-the-iframe-have-any-effect-on-page-load-time-why-not

    http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance?%3E

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode