-
Posts
-
Hi,
please see thread
#699899 .
and my website: http://www.debeweging.infoIn short: the normal buttons on the AVIA easy slider dont get smaller when the website is shown on smartphone. So we duplicated the two buttons( second set) below the easy slider pic. On laptop the normal two avia easyslider buttons are shown and the second set is hidden . On smartphone it should be the other way around , the two normal avia easysliader buttons are hidden and the second set below is shown.
It worked, but somehow not anymore. I did not change the CSS codes. oOn smartphone the two buttons on the easyslider are shwon again where they should disappear.
Could you have a look why it doesnt work anymore? If neccesary, see my log in credentials below in private windowThe complete CSS code ( given by you guys is:
/*animation button */
.avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-slideshow-button, .avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-slideshow-button {
animation: 0s ease-out 0s normal none 1 running caption-top;
visibility: visible;
}.hide-desktop {
display: none;
}/*responsiveness mobile */
@media only screen and (max-width: 767px) {
.responsive #top .slideshow_caption h2 + br {
display: none;
}
.responsive #top .slideshow_caption h2 {
margin-bottom: 0;
}
#top .avia-slideshow-button {
margin-top: 0;
}.hide-desktop {
display: block;
}.buttons-hide-mobile .avia-button {
display: none !important;
}.home #after_full_slider_1 .av-content-full {
padding-top: 10px;
}.avia-button-wrap.hide-desktop a.avia-button {
display: block;
width: 100%;
box-sizing: border-box;
padding: 8px 18px;
margin-bottom: 12px;
}
}/*responsiveness buttons only mobile */
@media only screen and (min-width: 480px) {
.only-smartphone { display: none !important; }}/*responsiveness no text on photo on mobile */
@media only screen and (max-width: 767px) {
.home .avia-caption-title {
display:none !important;
}
}
/*responsiveness caption and button on “over dick zirkzee blijft op zn plek */
@media only screen and (max-width: 1200px) and (min-width: 768px) {
.page-id-223 .caption_left .slideshow_caption {
right: auto;
left: 100px;
width: 50%;
}
}/*position button on “over dick Zirkzee” */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
#top .avia-slideshow-button {
margin-top: -5px;
}}
/* Portrait */
@media
(max-device-width: 800px)
and (orientation: portrait) {}
Hey DickZirkzee,
Please, may you re-check the credentials? Because I
ve tried to access and theyre wrong.Best regards,
John TorvikHi DickZirkzee,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css for a bit different solution
<pre>
@media only screen and (max-width: 767px) {
#full_slider_1 .av-single-slide.slide-1.active-slide img {
left: 0px !important;
min-height:300px;
min-width: 890px;
}
#full_slider_1 .caption_fullwidth.av-slideshow-caption.caption_left.active-slide {
min-height: 300px;
}
#full_slider_1 .avia-slideshow-inner {
min-height: 300px;
}
#full_slider_1 .container.caption_container {
padding-top:50px !important;
width: 60% !important;
float: left !important;
margin-left: 10px !important;
}
#full_slider_1 .slideshow_align_caption {
padding-top: 130px !important;
}
}@media only screen and (max-width: 450px) {
#full_slider_1 .container.caption_container {
width: 40% !important;
float: left !important;
margin-left: 10px !important;
}
#full_slider_1 .av-single-slide.slide-1.active-slide img {
left: 0px !important;
min-height: 200px;
min-width: 630px;
}
#full_slider_1 .caption_fullwidth.av-slideshow-caption.caption_left.active-slide {
min-height: 200px !important;
}
#full_slider_1 .slideshow_align_caption {
padding-top: 0px !important;
min-height: 200px ;
}
#full_slider_1 .avia-slideshow-inner {
min-height: 200px;
}
}
Let mw know what you think.
If you need further assistance please let us know.Best regards,
Victoria
- You must be logged in to reply to this topic.