-
Posts
-
1. On one of my laptops Win 8 screen res 1366×768 (with touch screen capabilities) the header does not reduce in size when you start scrolling down the page. (if headers set to fixed with social icons)
(does the same on ipad 2) (acts the same on your sample, it’s not my installation)
2. Also like on ipad, on that laptop the roll over effects (image overlay) don’t work when I hover the mouse over. These are controlled by:
.image-overlay .image-overlay-inside::before
.image-overlay.overlay-type-extern .image-overlay-inside::before
I’m ok with disabling overlay for ipads and phones, but I would like to have them enabled for my laptop. How to I target the laptop in the css?
(acts the same on your sample, it’s not my installation)
3. Easy Slider Left and Right Navigation arrows/buttons: On desktops they appear when you hover your mouse over the slider.
On mobile they show by default. The problem is that on ipads, when you have 4 columns with easy sliders, they are small in size and the arrows cover almost the entire slide. They are not responsive.
How to I target their size (a smaller size) for ipads? They are fine on phones as the 4 columns show as one column and the easy slider is bigger.
4. I designed one page with the Avia layout builder. Let’s say that I want to copy an entire section from that page to another page exactly as it is, with all the contents inside, how do I do that?
Let’s say I have a full column, then 4 smaller columns inside with content, I want to copy the parent full column with the other 4 and content inside to a new page.
If I switch from avia layout builder to the Default Editor I see nothing in the content section (visual or text view).
Is there an easy way to do this?
Thank you!
Hi chronospd,
Is the laptop touch screen enabled by chance? It sounds like its telling the browser its touch capable and to ignore hover effects. I’ve not had any experience with the hardware yet but its just a guess based how popular they have gotten for manufacturers recently.
For #3, can we see an example of the page/sliders? It’ll help make the css a bit more specific and not accidentally hit any other slideshow elements.
Regards,
Devin
Yes, I mentioned in the Q1 that the laptop is touch screen. Not sure how the css targets the touch enabled device instead of the screen resolution.
Q3: the website has the construction mode plugin activated.
Here is a screenshot of how the easy sliders look on my ipad:
https://www.dropbox.com/s/iwaqbx8lptf6lzz/Photo%20Aug%2021%2C%201%2029%2027%20AM.png
I can target that specific page in css.
Just need the part that targets the ipad and the css part that controls those buttons
Q4. I figured it out using templates.
Thank you!
Again, I don’t have the hardware to test it but most browsers will recognize touch vs non touch devices. There has been a lot of talk lately because of this hardware about what to do for future web development because right now we don’t have a way to really differentiate the hardware because of touch controls.
If possible, can you create an admin account for me so I can log in and take a look. If you are able I’ll try a few things and see if we can come up with a bandaid while we try some other things out.
Send the information to my email at DevinVinson [ at ] gmail.com. Please include a link to this topic in the email so that my spam filter doesn’t grab it :)
Regards,
Devin
I decided not to mess up with targeting the touch screen laptop.
But can you point me to the piece of code and file file (css or js) that controls the easy slider arrow buttons size?
I will figure it out from there how to modify the size and target the tablet portrait mode.
Thanks!
Hi,
1.) Add this on your custom.css or Quick CSS, adjust the height according to the height of the header when you it shrinks.
.header-scrolled #header_main .container {
height: 58px !important;
line-height: 58px !important;
}2.) This the code that controls the arrow:
#top .avia-slideshow-arrows a {
font-family: 'entypo-fontello';
display: block;
text-decoration: none;
color: #fff;
visibility: visible;
position: absolute;
width: 60px;
text-align: center;
height: 60px;
line-height: 62px;
font-size: 25px;
top: 50%;
margin: -30px 15px 0;
z-index: 99;
overflow: hidden;
text-indent: -600%;
}Regards,
Ismael
I found the bug why the arrows are not responsive:
There is this file which controls the responsive part of those slideshow arrows:
enfold/config-templatebuilder/avia-shortcodes/slideshow.php
line 272 to 279 which should add these classes to the slideshow if it’s size is <600px or <305px :
.avia-small-width-slider
.avia-super-small-width-slider
The classes are defined in: css/shortcodes.css line 2095.
The problem is that the config-templatebuilder/avia-shortcodes/slideshow.php is not adding those classes after inspecting the code preview of the page.
I tried on two different pages and uploaded many files from the new update just to make sure I have the new version.
I see it is working on your demo here:
http://kriesi.at/themes/enfold/pages/services/
One thing I will mentioned that I renamed my theme folder from enfold to 2013 before setting everything up. Not sure if this could cause that function to now work.
Thanks!
- The topic ‘Laptop 1366×768 acting like mobile device’ is closed to new replies.