Media Quries - Support | Kriesi.at - Premium WordPress Themes

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
September 18, 2016 at 8:36 am #688073

Tflores87
Participant

1. I have set my media queries for the correct sizes while checking the widths in the responsive mode in Firefox, but whenever I view them on an actual tablet, they do not work properly. I want anything under 768px that’s shows on desktop, to be what’s for tablets. How do I force the layout to break that way (one column)?

2. LOGO disappears when the Mobil navigation is opened, how do I get this to show/be visible?

3. As for the previous and next button that’s in the portfolio/product pages, how do I get that to show up for mobile devices (media query I assume, but what?).

4. I’m wanting to add a zoom effect on my woocommerce related products like the enfold theme does to the portfolio items, but the following script is causing the photos to jump a bit. Any thoughts?

Transform: scale(.8);

September 18, 2016 at 10:38 am #688086
Guenni007
Participant
To your point 3 try this in quick css (you have to set up your own colors)
```
@media only screen and (max-width: 767px) {
.responsive #top .avia-post-nav { display: block }
#top .avia-post-next {background:none repeat scroll 0 0 rgba(255,50,50,0.6);top: 65%}
#top .avia-post-prev {background:none repeat scroll 0 0 rgba(50, 100, 255,0.6);top: 65%}
#top .avia-post-nav {height: 60px;margin-top: -55px;padding: 15px}
.avia-post-nav .entry-info-wrap {margin-top: -11px}
.avia-post-nav .entry-info {height: 50px;width: 180px}
.avia-post-nav .entry-image {height: 50px;width: 50px}
.avia-post-nav .entry-info span {display: table-cell;font-size: 13px;line-height: 1.3em;vertical-align: middle}
.avia-post-nav .entry-image img {display: block;height: auto;width: 50px}
.avia-post-nav:hover .entry-info-wrap {width: 200px}
}
```
i did change the height too – because on mobile it looks strange if those navigations are on normal height.

btw: if you want to change the direction (previous is to the left – next is to the right side) add this to child-theme functions.php:
```
add_filter( 'avia_post_nav_entries', 'enfold_customization_postnav', 10, 2); 
function enfold_customization_postnav($entries, $settings) {
    $entries['prev'] = get_next_post($settings['same_category']);
    $entries['next'] = get_previous_post($settings['same_category']);
    return $entries;
}
```
September 18, 2016 at 10:45 am #688087
Guenni007
Participant
To your point 2) now we have this hamburger – menu if one likes to have it
on that i have to look how to get the logo in that menu –
but on the old offcanvas Navigation there is this code to quick css :
```
#mobile-advanced {
	background-image: url("path to your logo"); 
	background-position: left top; 
	background-repeat: no-repeat; 
	background-size: 75% auto; 
	padding: 20% 0 !important ;
}
```
depending on your logo – you have to set up different size and padding – values !

if you want to have your logo on the hamburger menu simply insert the home link twice to your menu and fill in the navigation label of the first one the image link (f.e.: <img src="/wp-content/uploads/Logo_white.png" alt="wpwdweiss" width="400" /> )
it is best to have here an alternative Logo (as on transparent option) that has good contrast to the dark background.
- This reply was modified 8 years, 2 months ago by Guenni007.
September 19, 2016 at 8:55 am #688362

Rikard
Keymaster

Hi @Tflores87,

Did you try out the suggestion from @Guenni007 and did you have any luck with them?

Thanks,
Rikard

September 19, 2016 at 6:23 pm #688646
Tflores87
Participant
Thank you for your time, @guenni007! I appreciate it. @rikard, the following questions still need support.

1. Still waiting for support response.

2. I may have understood you incorrectly, but I tried inserting the logo into the additional home button (<img src="/wp-content/uploads/2016/08/KD5-01.png" alt="“Logo”" width="400" />), but it turned out like this (Image A) and not in position where the regular logo is. I also tried the css approach, but when I tried to re-position the logo, it wold move the rest of the navigation links; so that did not work. I am wanting the normal logo (position, width/height) to show up in the hamburger menu whenever it is activated (Here is the normal logo, it should simply remain in place whenever the hamburger menu is active Image B). My thoughts were that z-index could fix this for the logo?

3. This worked!

4. Still waiting for support response.
- This reply was modified 8 years, 2 months ago by Tflores87.
September 22, 2016 at 5:41 am #690054
Ismael
Moderator
Hey!

1.) Could you please provide a link to the actual page with the columns or provide a screenshot of the section?

4.) Please add this in the Quick CSS field:
```
#top .related .thumbnail_container:hover img {
    transform: scale(1.2);
    transition: all 0.5s;
}
```
If possible, please create a single thread for each inquiry. Thank you.

Best regards,
Ismael
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.