Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 22, 2019 at 4:32 pm #1159211
    Enfolduser

    Hi – looking to do some small customisations for the horizontal tablet version of the site – I need to add some white space above the video on the home page https://jotuffrey.com to shift it down.
    When I add the white space and hide it on all but tablet horizontal, it doesn’t show. It will only show if I unhide on wide screen – which I don’t want as it then looks wrong on desktop!.
    I’m thinking there’s a @media width set up somewhere – but cannot find it. There’s nothing in the QuickCSS.
    Details shared in private.

    Many thanks,
    Mark

    November 26, 2019 at 4:15 am #1160182
    Ismael

    Hey Mark,

    Thank you for the inquiry.

    You can use the following css code to add space above the video on tablet view.

    @media only screen and (max-width: 767px) {
    #av_section_10 .avia-video {
	margin-top: 130px;
    }
}

    Apply a unique ID or class attribute to the video element if you want to replace the automatically generated or default selectors in the css.

    // https://kriesi.at/documentation/enfold/add-custom-css/

    Best regards,
    Ismael

    November 26, 2019 at 3:59 pm #1160378
    Enfolduser

    Thanks Ismael – I will implement that – is there any reason though why the screen options tick box doesn’t work in this instance?
    Mark

    November 27, 2019 at 1:46 pm #1160615
    Ismael

    Hi,

    Thank you for the update.

    Did you check it on an iPad Pro? The “Hide on medium sized screens” in the screen options will only work when the screen width is equal or less than 989px, so it won’t work on an iPad Pro in landscape mode.

    Best regards,
    Ismael

    November 27, 2019 at 11:54 pm #1160835
    Enfolduser

    No – just on a normal sized iPad – that’s why I was puzzled the standard method was not having an effect.

    Also – I’ve added that CSS to the Quick CSS (with no other change to that specific section) and it’s having no effect on an iPad – any ideas?

    Many thanks,
    Mark

    November 29, 2019 at 10:44 am #1161166
    Ismael

    Hi,

    We can adjust the condition on how the theme hides the element when the “tablet/medium” screen option is enabled for an element. Please add the following css code and make sure that the Performance > File Compression is temporarily disabled.

    @media only screen and (min-width: 768px) and (max-width: 1366px) {
	.responsive.av-no-preview #top #wrap_all .av-medium-hide, .responsive.av-no-preview #top #wrap_all .av-medium-font-size-hidden, .responsive.av-no-preview #top #wrap_all .av-medium-font-size-title-hidden {
	     display: none;
        }
}

    The element will not display when the screen width is less than 1366px and more than or equal to 768px.

    Thank you for your patience.

    Best regards,
    Ismael

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