Fullscreen Slider: Different Button Position on Dekstop and mobile? - Support

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

April 27, 2024 at 8:24 pm #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 ;)

April 28, 2024 at 10:33 am #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

April 28, 2024 at 7:40 pm #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

April 29, 2024 at 12:12 pm #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

April 30, 2024 at 1:01 pm #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?

April 30, 2024 at 6:45 pm #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

April 30, 2024 at 7:57 pm #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?

May 1, 2024 at 11:00 am #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

May 2, 2024 at 7:03 pm #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

May 3, 2024 at 9:06 am #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

May 3, 2024 at 1:08 pm #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 2 weeks ago by northorie.

May 4, 2024 at 10:53 am #1442272

Hi,

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

Best regards,
Rikard

May 4, 2024 at 1:05 pm #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; 
}

May 6, 2024 at 8:58 am #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

May 6, 2024 at 3:13 pm #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;
}
}

May 6, 2024 at 5:40 pm #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

May 7, 2024 at 1:02 pm #1442559

no change :(

May 7, 2024 at 4:40 pm #1442579

Hi,

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

Best regards,
Rikard

May 7, 2024 at 8:15 pm #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.

May 8, 2024 at 8:42 am #1442640

Ismael

Moderator

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

May 8, 2024 at 3:11 pm #1442700