Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1162737

    Hi Guys,.. starting a new thread because non of the solutions from the old thread worked.

    We just need to center the logo on mobile devices for this site.

    #1163084

    Hey Diana,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
    .responsive #top .logo,.responsive .logo img { width: 100%; }
    
    

    Best regards,
    Yigit

    #1163085

    Hey Diana,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
    .responsive #top .logo,.responsive .logo img { width: 100%; }
    
    

    Best regards,
    Yigit

    #1163270

    Thanks for your help. Unfortunately, that did not work.

    #1163352

    Hi,

    Have you tried flushing cache? If it still does not work after clearing cache, please create temporary admin logins and post them here privately so we can look into it :)

    Best regards,
    Yigit

    #1163445

    Yes. Of course. Login credentials attached. Thank you in advance.

    #1163637

    Hi Red Rubber Media ,

    Can you disable caching and minification for now?

    What is the login link? The normal ones are not working.

    Best regards,
    Victoria

    #1163679

    quite confused up there in your css.
    What would I do now in a hurry.

    I would make myself a top 1/1 container ( no color-section) with your logo ( image ALB Element) in it, and link that image to the homepage.
    I would only display this container in the responsive case, while I would set the entire logo (span.logo) container to Display: none.
    Then only a small correction regarding #main padding would be necessary. Done.
    So that you don’t have to set this container on all pages, I would set it with jQuery as first-child of #main on all pages.

    See here a quick test page : https://webers-testseite.de/cynthia/special-header/

    you can insert this image on each site by filter

    add_action('ava_after_main_container', function() {
      echo do_shortcode("[av_one_full …]…[/av_one_full]");
    });
    #1163751

    first a few words: in a development phase in which you want to get help it would be nice to release the context menu button of the mouse on a website. Then it would be good if also optimization tools and merging were switched off; only then it is possible to localize the rules exactly which disturb.
    Then you can also say exactly where rules and the also still important useless too much were set. That was also the case here. So now to the first attempt:

    Get rid of some rules in your code :
    f.e.: ( as i said i can not give advice because of merging tools )

    @media only screen and (min-device-width :375px) and (max-device-width :736px) and (orientation :portrait){
    	.responsive .logo img {
    	height:130px!important;
    	max-height:130px;
    	width:300px;
    	max-width:300px
    	}
    }

    There must be similar rules that are for screenwidth less than 990px – they were set sometimes to important – thats why they disturb the real interaction.

    my rules here are set to important – the only way to get them work because other logo rules ( container and image) are present too here:
    maybe you can do it without important when the set of competing rules has been removed.

    @media only screen and (min-width: 768px) and (max-width: 989px) {
    	.responsive .logo {
    	  position: absolute !important;
    	  width: 100% !important;
    	}
    
    	.responsive .logo img {
    	  max-width: inherit !important;
    	  max-height: 250px !important;
    
    	}
    }
    
    @media only screen and (max-width: 767px) {
    	.responsive .logo {
    	  position: relative !important;
    	  width: 100% !important;
    	}
    
    	.responsive .logo img {
    	  max-width: inherit !important;
    	  max-height: 250px !important;
    	  margin-top: 50px !important;
    	}
    }

    btw: Is the placement of the shopping cart there wanted?
    In the responsive case, when the screen width becomes small, I have placed it next to the other symbols at the top.

    See Film: https://webers-testseite.de/celtic.mp4
    PS : make the film fullscreen then you can see on top the screenwidth in px

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