Tagged: , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 9, 2016 at 9:19 am #595394
    henrik51

    Hi,
    Is it possible that the theme can connect to an other header on mobile and tablets that the one showed on a computer?
    Right now I use a static image inside the layerslider and I want it to show a totally other image only on mobiles and tablets.

    Perhaps some custom code…..?

    Webpage: http://www.henrik-juul.dk

    Kind regards,

    March 9, 2016 at 9:40 am #595407
    begrafiks

    Hi @henrik51;
    your first slider has as “id” /full_slider_1/,
    if you add another one into your page it would be /full_slider_2/.

    Then if you add these lines into your child theme css or quick css (under Enfold theme settings)
    it would show #1 and hide #2 for desktop and
    it would show #2 and hide #1 for mobil (max 767px) 

    #full_slider_2 {display: none !important;}

/*Mobile Styles */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
#full_slider_1 {display: none !important;}
#full_slider_2 {display: block !important;}
}

    In any case I would advice to see Enfold documentation.

    March 9, 2016 at 10:18 am #595428
    Vinay

    Hi!


    @begrafiks     thank you for your help!

    Please enable custom class name support and use the css below in Quick CSS and add 2 images on the page and use class name “only_mobile” or “only_desktop” on the Advanced Layout Builder elements

    Turn on Custom CSS Class field for all ALB Elements

    /*Show only in mobile or desktop*/

    @media only screen and (min-width: 769px) {
.only_mobile { display: none !important; }}

@media only screen and (max-width: 768px) {
.only_desktop { display: none !important; }}

    Best regards,
    Vinay Kashyap

    March 9, 2016 at 3:24 pm #595600
    henrik51

    Thanks – works fine :-)

    Kind regards,

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Different header on mobile and tablets’ is closed to new replies.