Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 23, 2017 at 7:37 pm #880887
    nasman22

    Hi,

    Screen options and element visibility are a really good feature for Enfold BUT is there any way to change the default sizes?

    Hide on large screens (wider than 990px – eg: Desktop)
    Hide on medium sized screens (between 768px and 989px – eg: Tablet Landscape)
    Hide on small screens (between 480px and 767px – eg: Tablet Portrait)
    Hide on very small screens (smaller than 479px – eg: Smartphone Portrait)

    I’d like large screens to be defined as “wider than 1024px” – This would makie it easier for me when designing for iPads with a 1025 landscape viewport…?

    I’m hoping you can help..

    Thanks
    Nas

    November 23, 2017 at 7:41 pm #880892
    Jordan Shannon

    Hey nasman22,

    Actually this can be done via css media queries. If you add the !important; declaration within quick css, it will override what you currently have set in the options.

    Best regards,
    Jordan Shannon

    November 24, 2017 at 1:05 pm #881157
    nasman22

    Thanks – Could you give me an example please to override 990 to 1024?

    November 24, 2017 at 6:42 pm #881359
    Jordan Shannon

    Hi,

    You would use the following media query:

    @media only screen and (min-width: 1024px)  {
/* Your css here */
}

    Best regards,
    Jordan Shannon

    November 24, 2017 at 7:49 pm #881394
    nasman22

    Thanks Jordan!

    November 24, 2017 at 8:18 pm #881398
    Jordan Shannon

    Hi,

    No problem, did you need further help or should we close this thread.

    Best regards,
    Jordan Shannon

    March 2, 2018 at 3:58 pm #920400
    Pascoflair

    Hello

    I have the same problem. My webpage dont look good on iPad with wider screen than 990 px, Should I just copy the suggested CSS into css media queries? But where can I find the css media queries? Is Quick CSS and css media queries the same?

    Thanks

    March 2, 2018 at 4:22 pm #920415
    Yigit

    Hi,


    @Pascoflair     Please go to Enfold theme options > Layout Builder and check “Show element options for developers” and then edit your element and give it a custom CSS class (“my-custom-class” in example below) and then add following code to Quick CSS field in Enfold theme options > General Styling tab

    @media only screen and (min-width: 1024px)  {
.my-custom-class { display: none !important; }
}

    Best regards,
    Yigit

    March 5, 2018 at 10:06 am #921372
    Pascoflair

    Hi Yigit. I have checked the “Show element options for developers” box and saved the change.

    But can you please be more specific in how I ” edit your element and give it a custom CSS class”? I did not understand this.

    (The last bit of adding the code to Quick CSS field in Enfold theme options > General Styling tab I will manage :-))

    Thanks

    March 5, 2018 at 2:12 pm #921480
    Yigit

    Hi,

    Please go to Enfold theme options > Layout Builder and make sure “Show element options for developers” is checked – https://i.imgur.com/Y8m5GDp.png

    And then when you edit your element, you should be able to see “Custom CSS class” field – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/blur.jpg that is where you should add “my-custom-class” (without double quotes) and then custom CSS code goes to Quick CSS in Enfold theme options > General Styling :)

    Best regards,
    Yigit

    March 5, 2018 at 4:22 pm #921543
    Pascoflair

    Hi again

    The problem is that even if I check element options for developers I am not able to see the “Custom CSS class” field as shown in your link…?

    Thank u for your patience with me :-)

    March 5, 2018 at 4:49 pm #921572
    Yigit

    Hi!


    @pascoflair     Could you please start a new thread under Enfold sub forum and attach temporary admin logins in private content field so we can look into it? :)
    If you post them here, they will be visible to creator of this thread as well.

    Best regards,
    Yigit

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