Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • #1441004

    Hi,
    I’m using to different fullscreen slider on desktop and on mobile, with a different picture.
    With your help I’ve adjusted the position of the slider button for desktion
    Now I would need a different position on mobile. Is that possible?

    Best regards

    #1441068

    Hey northorie,

    I’m not sure I understand the problem you are having. Please post a link to where we can see the element, then try to explain your intentions a bit further.

    Best regards,
    Rikard

    #1441087

    Hi,
    here is the screen: Screenshot

    Fullscreen-Slider #1 is only visible on desktop. It has a button, which fits perfectly
    Fullscreen Slider #2 is only visible on mobil, because the pictures has to be a different size. It also conains the slider button, but of course the position doesn’t fit to the layout.

    I hope this makes sense ;)

    #1441141

    Hi,

    Thanks for the screenshot, could you post a link to where we can see the actual elements on your site as well please?

    Best regards,
    Rikard

    #1441215

    Sure, It’s on private content.
    On desktop-version everything is fine and shall stay the way it is.
    When you open the site on mobile you can see that th button is not at a good position (how could it be? It’s placed for desktop-Mode)

    Best regards

    #1441293

    Hi,

    Thanks for that. It looks to be hidden on very small screens, and looks smaller on sizes above that until tablet size. What exactly are you looking to change between tablet and very small sizes?

    Best regards,
    Rikard

    #1441445

    Hi,
    I would like to place the button for the second full-screen-slider-element seperately from the first elemet for desktop.
    Is that possible?

    #1441489

    Hi,

    I think that should be possible yes, but I’m still not sure what you are looking to change though? Please try explaining your intentions a bit further, or post a screenshot or mockup highlighting them.

    Best regards,
    Rikard

    #1441496

    I guess this is the code for the slideshow button on desktop, isn’t it?

    @media only screen and (max-width: 450px) { 
    .slideshow_inner_caption {
    	top: -40px;
    }
    }
    @media only screen and (min-width: 768px) { 
    #top .caption_bottom .slideshow_caption .slideshow_inner_caption {
        position: relative;
        text-align: center;
    }
    #top .slideshow_inner_caption .avia-slideshow-button.avia-button {
        width: 500px;
        height: 56px;
        font-size: 22px;
    }
    @media only screen and (min-width: 768px) { 
    .slideshow_inner_caption {
    	top: -125px;
    }
    }
    #top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button {
        background-color: #a37652;
        color: white;
        border-radius: 10px;
    }
    #top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button:hover {
        background-color: #c79a52;
        color: white;
        border-radius: 15px;
    }

    I would probably need it a second time for the second element?

    #1441563

    Hi,

    Thanks for that, you might be correct but it will be easier to help you out if you let us know what you would like to achieve on smaller screens. Could you share a screenshot or mockup highlighting that please?

    Best regards,
    Rikard

    #1441978

    Hi,
    the screenshot of the mobile header with the button i would like to have is on private content. hope that helps.

    Best regards

    #1442087

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
    .home .avia-fullscreen-slider .caption_bottom .slideshow_caption {
        bottom: 250px;
    }
    .home .slideshow_inner_caption .avia-slideshow-button.avia-button {
        background-color: #a37652;
        color: white;
        border-radius: 10px;
    }
    }

    Best regards,
    Rikard

    #1442147

    Now I seem to have destroyed evertything.
    I’m just not seeing through in the css anymore and now the desktop version is destroyed and mobile doesn’t change.

    I’m frustrated

    My Header meu is destroyed as well.
    Can anyone help me to fix everything and to structure the css? I am lost

    • This reply was modified 7 months, 3 weeks ago by northorie.
    #1442272

    Hi,

    You posted CSS earlier in this thread, did you try to replace that?

    Best regards,
    Rikard

    #1442278

    I’m just not looking through in my css anymore. I’m afraid to make it worse
    Can you please help me?

    /* Header mobile */
    @media only screen and (max-width: 767px) {
      .responsive #top #wrap_all #header {
        position: fixed;
      }
    }
    @media only screen and (max-width: 767px) {
    .responsive #header_main .container {
        height: 50px !important;
    }
    .responsive .logo a {
        vertical-align: top !important;
    }
    .responsive .logo img {
        max-height: 50px !important;
    }
    }
    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .main_menu {
        top: -15px;
        height: 45px;
        left: auto;
        right: 0;
        display: block;
        position: absolute;
    }
    }
    @media only screen and (max-width: 500px) { 
    .responsive #top #wrap_all #main {
            padding-top: 50px !important;
        }
    }
    /* Farbe Nachrichtenversand */
    h3.avia-form-success{
     color:#99a502!important;	
    }
    /* Text mit Foto*/
    .avia_textblock p img {
    	  border-radius: 100%;
    	  box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 4px 4px;
    }
    .avia_textblock img.alignleft {
      margin-right: 40px;
    margin-bottom: 20px;
    }
    @media only screen and (max-width: 767px) { 
    #hello .avia_textblock img {
    	width: 50%;
    }
    }
    /* ScrollDown Pfeil */
    #top .scroll-down-link {
    	color: #a47654;
    }
    .html_header_transparency #top #main .caption_bottom .slideshow_caption {
        padding-top: 0;
    }
    }
    @media only screen and (max-width: 767px) { 
    	#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
        position: relative;
        text-align: center;
    }
    #top .slideshow_inner_caption .avia-slideshow-button.avia-button {
    	padding: 10px 6px;
    	font-size: 10px;
    }
    }
    .html_header_transparency #top #main .caption_bottom .slideshow_caption {
        padding-top: 0;
    }
    }
    /* SlideShow Button Desktop*/
    @media only screen and (min-width: 768px) { 
    #top .caption_bottom .slideshow_caption .slideshow_inner_caption {
        position: relative;
        text-align: center;
    }
    #top .slideshow_inner_caption .avia-slideshow-button.avia-button {
        width: 500px;
        height: 56px;
        font-size: 22px;
    }
    @media only screen and (min-width: 768px) { 
    .slideshow_inner_caption {
    	top: -125px;
    }
    }
    /* SlideShow Button Mobil */
    @media only screen and (max-width: 767px) {
    .home .avia-fullscreen-slider .caption_bottom .slideshow_caption {
        bottom: 250px;
    }
    .home .slideshow_inner_caption .avia-slideshow-button.avia-button {
        background-color: #a37652;
        color: white;
        border-radius: 10px;
    }
    }
    /* SocialMedia Icons*/
    #top #wrap_all .av-social-link-instagram:hover a, #top #wrap_all .av-social-link-instagram a:focus {
        color: #fff;
        background-color: #c82161;
    }
    .page-id-691 .av-masonry .av-masonry-date {
      display: none; 
    }
    .avia_start_animation .avia-icon-circles-inner {
      transition: all 0.2s cubic-bezier(0.175,0.885,0.320,1.275);
    }
    @media only screen and (max-width: 2500px) {
      #top #header.av_header_transparency .av-main-nav > li.menu-item  {
          display: none!important;
      }
      #top #header.av_header_transparency .av-burger-menu-main {
          cursor: pointer;
          display: block!important;
      }
    }
    .page-id-691 #after_section_2 {
      display: none; 
    }
    #1442412

    Hi,

    I’m not sure exactly what you need help with, but it looks like there are some extra ending brackets, and some missing ending brackets. The last one here seems like it can be removed:

    .html_header_transparency #top #main .caption_bottom .slideshow_caption {
        padding-top: 0;
    }
    }

    And this media query is not closed:

    /* SlideShow Button Desktop*/
    @media only screen and (min-width: 768px) { 

    Best regards,
    Rikard

    #1442445

    Thanks, I guess I fixed my css by coping each code one by one back in.
    On Desktop everything looks good again.
    But the button on the mobile slider just won’t change.
    Here is my current full css.

    /* Header mobile */
    @media only screen and (max-width: 767px) {
      .responsive #top #wrap_all #header {
        position: fixed;
      }
    }
    @media only screen and (max-width: 767px) {
    .responsive #header_main .container {
        height: 50px !important;
    }
    .responsive .logo a {
        vertical-align: top !important;
    }
    .responsive .logo img {
        max-height: 50px !important;
    }
    }
    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .main_menu {
        top: -15px;
        height: 45px;
        left: auto;
        right: 0;
        display: block;
        position: absolute;
    }
    }
    @media only screen and (max-width: 500px) { 
    .responsive #top #wrap_all #main {
            padding-top: 50px !important;
        }
    }
    /* Farbe Nachrichtenversand */
    h3.avia-form-success{
     color:#99a502!important;	
    }
    /* Text mit Foto*/
    .avia_textblock p img {
    	  border-radius: 100%;
    	  box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 4px 4px;
    }
    .avia_textblock img.alignleft {
      margin-right: 40px;
    margin-bottom: 20px;
    }
    @media only screen and (max-width: 767px) { 
    #hello .avia_textblock img {
    	width: 50%;
    }
    }
    /* ScrollDown Pfeil */
    #top .scroll-down-link {
    	color: #a47654;
    }
    /* Blog Leerzeile entfernen */
    .page-id-691 #after_section_2 {
      display: none; 
    }
    /* Blog Postdatum entfernen */
    .page-id-691 .av-masonry .av-masonry-date {
      display: none; 
    }
    /* SocialMedia Icons*/
    #top #wrap_all .av-social-link-instagram:hover a, #top #wrap_all .av-social-link-instagram a:focus {
        color: #fff;
        background-color: #c82161;
    }
    /* Icon Circle schneller*/
    .avia_start_animation .avia-icon-circles-inner {
      transition: all 0.2s cubic-bezier(0.175,0.885,0.320,1.275);
    }
    /* Desktop Menu*/
    @media only screen and (max-width: 2500px) {
      #top #header.av_header_transparency .av-main-nav > li.menu-item  {
          display: none!important;
      }
      #top #header.av_header_transparency .av-burger-menu-main {
          cursor: pointer;
          display: block!important;
      }
    }
    /* Header Button Desktop*/
    @media only screen and (max-width: 450px) { 
    .slideshow_inner_caption {
    	top: -40px;
    }
    }
    @media only screen and (min-width: 768px) { 
    #top .caption_bottom .slideshow_caption .slideshow_inner_caption {
        position: relative;
        text-align: center;
    }
    #top .slideshow_inner_caption .avia-slideshow-button.avia-button {
        width: 500px;
        height: 56px;
        font-size: 22px;
    }
    @media only screen and (min-width: 768px) { 
    .slideshow_inner_caption {
    	top: -125px;
    }
    }
    #top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button {
        background-color: #a37652;
        color: white;
        border-radius: 10px;
    }
    #top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button:hover {
        background-color: #c79a52;
        color: white;
        border-radius: 15px;
    }
    /* Header Button Mobile*/
    @media only screen and (max-width: 767px) {
    .home .avia-fullscreen-slider .caption_bottom .slideshow_caption {
        bottom: 250px;
    }
    .home .slideshow_inner_caption .avia-slideshow-button.avia-button {
        background-color: #a37652;
        color: white;
        border-radius: 10px;
    }
    }
    #1442454

    Hi,

    Please try this CSS as well:

    @media only screen and (max-width: 767px) {
      #top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button {
        background-color: #a37652;
        color: white;
      }
    }

    Best regards,
    Rikard

    #1442559

    no change :(

    #1442579

    Hi,

    Did you try placing the CSS at the very top of the Quick CSS box?

    Best regards,
    Rikard

    #1442606

    That worked!!
    Thanks a lot!

    Can I move the button to the left a bit?
    I tried it with:

    @media only screen and (max-width: 767px) {
    .home .avia-fullscreen-slider .caption_bottom .slideshow_caption {
        bottom: 325px;
        left: 300px;
    }

    But that doesn’t work.

    #1442640

    Hi,

    You can use this css code to move the button to the left:

    .home #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button {
        margin-right: 100px;
    }
    

    If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

    Thank you for your understanding.

    Best regards,
    Ismael

    #1442700

    Great, now I’m happy!
    Thanks a lot for your patience :)

    Topic can be closed

Viewing 23 posts - 1 through 23 (of 23 total)
  • The topic ‘Fullscreen Slider: Different Button Position on Dekstop and mobile?’ is closed to new replies.