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

  •  902
    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

  •  902
    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!)

  •  902
    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?

  •  902
    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

  •  902
    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

  •  902
    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.