Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 13, 2017 at 5:11 pm #807577
    erhabi

    Hi,

    I have been breaking my head around this and I cannot get it to work.

    I need to position the button in the top right corner over the fullwidth slider for mobiles, tablets and desktops.

    Now below the 360px breakpoint it does show the positioning change which is great, however, once testing this in 768px the position resets to default of the theme and the quick css is ignored, I don’t understand why?

    I have been trying out the following code with no avail or any success in sight.

    Any help would be appreciated:

    @media only screen and (max-width: 360px) {
#top .avia-slideshow-button.avia-color-light {        
position: absolute;
top: 0px !important;
left: 200px !important;
text-transform: none;
font-weight: normal;
	}
}
@media only screen and (max-width 768) {
#top .avia-slideshow-button.avia-color-light {
position: absolute;        
top: -200px !important;
left: 600px !important;
text-transform: none;
font-weight: normal;
	}
}
    June 14, 2017 at 3:24 am #807722
    Mike

    Hey erhabi,
    Please include the url to the page in question so we can take a closer look.

    Best regards,
    Mike

    June 14, 2017 at 8:58 am #807852
    erhabi

    Hi Mike,

    Just to give you a bit of an intro of what I am trying to do here:

    1. I have created a welcome page that will play a fullscreen YouTube video.
    2. This page has a button to skip the video or proceed to the website.

    I have taken a different route now since javascript doesnt allow fullscreen videos to be shown on tablets and phones.

    I am now using a plugin called ARVE Advanced Responsive Video Embedder, that somehow magically displays videos in fullscreen mode on bpth, phones and tablets.

    I however, need a container (code block in this case) to be full width and height of the screen which I am having trouble with.

    I have placed the code block inside a color section (since that can be fullwidth), however, the code block seems to be nested within two other divs!!

    I am posting the login below for you to have a look please.

    June 14, 2017 at 10:32 am #807893
    erhabi

    Hi Mike,

    Any luck?

    A bit of a desparate move here:

    .avia_codeblock {
position: absolute;
top: 0;
margin: auto;
width: 1920px !important;
}

    So the video resizing does work according to the change in the container div (avia_codeblock).

    I however want this to be responsive so this is always fullscreen on a desktop – 100% widths and heights. Percentages do not work it seems, just pixel values.

    How can I achieve this?

    June 14, 2017 at 6:08 pm #808132
    erhabi

    Alright, I think I have figured it out but I have run into another problem on mobile screens.

    What I have done is, I have created two color sections, one in which the button resides and the other one which has the code block.

    I have assigned developer ids to both respectively and I am targeting the containers under the div ids.

    Which works fine for desktops and tablets. However, the phones are a problem.

    From out of nowhere there seems to me a max-width: 85% and width: 85% values being re-assigned for the containers on mobile views.

    Here’s my code:

    .avia-caption-title {
  text-transform: lowercase !important;
  font-weight: normal !important;
}
.av-main-nav li a {
  font-weight: normal !important;
  font-size: 12px !important;
  color: #dedede !important;
}
.av-main-nav li a:hover {
  font-weight: normal !important;
  font-size: 12px !important;
  color: #ffffff !important;
}
body .column-top-margin {
  margin-top: 10px;
}
.content,
.sidebar {
  padding-top: 39px;
  padding-bottom: 40px;
}
.toggle_content {
  padding: 10px;
}
.av-special-heading {
  margin-top: 20px;
}
.js_active .tab_content {
  padding: 0;
}
img {
  border-radius: 0 !important;
}
@media only screen and (min-width: 1920px) {
  .flex_cell_inner .avia-image-container-inner,
  .flex_cell_inner .avia-image-container-inner img {
    width: 100%!important;
  }
}
.slide-entry-title {
  color: #666666 !important;
  text-transform: lowercase !important;
  margin-bottom: -20px !important;
  font-size: 13px !important;
}
.image-overlay {
  visibility: hidden;
}
.post-title,
.entry-title {
  text-transform: capitalize !important;
  font-weight: normal;
  letter-spacing: normal !important;
}
.slide-entry-title,
.entry-title {
  text-align: left !important;
  font-weight: bold;
}
.tab.widget_tab_comments {
  display: none!important;
}
#mobile-advanced li > a:before,
.html_header_mobile_behavior #mobile-advanced span > a:before,
#mobile-advanced .mega_menu_title:before {
  display: none;
}
#advanced_menu_toggle,
#advanced_menu_hide {
  border-style: none;
  background-color: transparent;
}
#advanced_menu_toggle:hover,
#advanced_menu_hide:hover {
  border-style: none;
  background-color: transparent !important;
  color: #000000 !important;
}
.slide-entry-excerpt,
.entry-content {
  margin-top: 10px;
}
#header_main {
  border-style: none !important;
}
@media only screen and (max-width: 768px) {
  .flex_column {
    width: 100% !important;
    margin-left: 0;
  }
}
@media only screen and (max-width: 640px) {
  .avia-fullscreen-slider {
    top: -100px;
    margin-bottom: -100px;
  }
  .slideshow_caption {
    padding-top: 0 !important;
  }
  .responsive #top .slideshow_caption h2 {
    font-size: 14px !important;
  }
  .avia_textblock,
  .avia_textblock * {
    font-size: 12px !important;
  }
  .flex_column_table,
  .av-equal-height-column-flextable {
    margin-top: 0 !important;
  }
}
@media only screen and (max-width: 766px) {
  #vidskipbt .avia-button {
    margin-right: 60px;
  }
  #vidskipbt {
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    min-height: 1px !important;
  }
  #vidskipbt .container {
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    min-height: 1px !important;
  }
  #vidwelcome .container {
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }
}
@media only screen and (max-width: 360px) {
  .avia-fullscreen-slider {
    top: -140px;
    margin-bottom: -140px;
  }
  .slideshow_caption {
    padding-top: 0 !important;
  }
  .responsive #top .slideshow_caption h2 {
    font-size: 14px !important;
  }
  .avia_textblock,
  .avia_textblock * {
    font-size: 12px !important;
  }
  .flex_column_table,
  .av-equal-height-column-flextable {
    margin-top: 0 !important;
  }
}
@media only screen and (max-width: 1024px) {
  #mobile-advanced,
  #advanced_menu_toggle,
  #advanced_menu_hide {
    display: block;
  }
  nav.main_menu {
    display: none;
  }
  .responsive #top .slideshow_caption h2 {
    font-size: 20px !important;
  }
}
.footer {
  border-style: none;
}
#vidskipbt .avia-button {
  margin-right: 60px;
}
#vidskipbt {
  max-width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  min-height: 1px !important;
}
#vidskipbt .container {
  max-width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  min-height: 1px !important;
}
#vidwelcome .container {
  max-width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
}
.avia-section.av-minimum-height .container .content {
  vertical-align: top;
}
@media only screen and (max-width: 769px) {
  #footer .flex_column {
    width: 100% !important;
    margin-left: 0 !important;
  }
}
.avia-menu {
  border-style: none !important;
}

    Any help is appreciated.

    June 14, 2017 at 6:15 pm #808137
    erhabi

    Also, I can get what I want with the following:

    .responsive #top #wrap_all .container {max-width: 100%; width: 100%}

    This however targets the entire website on mobile view which I do not want. I just want it to target the video and button color section containers.

    What I am doing wrong here?

    June 15, 2017 at 12:04 am #808318
    erhabi

    Nevermind. I have figured this out and it works fine on all platforms now. Thanks for your help anyway.

    June 15, 2017 at 12:58 am #808333
    Mike

    Hi,
    Glad to hear, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Fullwidth Slider Button Positioning (Responsive Help!!)’ is closed to new replies.