Forum Replies Created
-
Posts
-
Sorry the precise link is above. Site #1 in Private Content
#post-580249The screenshot is also above here. #1a in Private Content
#post-583850Thank you
Did you go to the site and look at it? The thumbnail grid becomes separated at different screen sizes. The instagram box changes completely and the spacing between the thumbnails is different vertically than it is horizontally. You won’t understand what I am saying unless you try it yourself.
Please try to resize your window at different positions. You will see the problem. The px have nothing to do with this issue.
Thanks,
Jas
I don’t think I am explaining myself correctly. ALL of the CSS below, no matter what I adjust, only adjusts the size and position of the icons. I have attempted to adjust the 20px and 85px values.
I want to make the color section shorter. I need CSS to adjust the height of the background color section that the icons are laying on top of.
The icons are perfect. The background that the icons lay on top of are not.
This is what I have currently…
@media only screen and (max-width: 767px) { #top #wrap_all #photo-center .flex_column.av_one_third { width: 31%; height: 85px!important; float: left; clear: none; margin-left: 1%; }} /*content element: icon*/ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) { a.av-icon-char { font-size: 20px !important; width: 20px !important; height: 20px !important; line-height: 20px !important; }} /*icon content element size*/Hi Andy,
The code below makes things worse. It causes other problems. I left this CSS on the site. Resize your desktop browser at different sizes and take a look at what happens. I used 80px x 80px by the way. 60 x 60 looked bad.
.av-instagram-pics.av-instagram-size-thumbnail a.lightbox-added { width: 80px; height: 80px; } @media only screen and (min-width: 414px) and (max-width: 736px) { .av-instagram-pics.av-instagram-size-thumbnail a.lightbox-added { width: 80px; height: 80px; }}Hey that helped Ismael!
An interesting thing happened. The CSS made the top of the photo cropped.
So, I added
height: 320px !important;and it moved the photo AND made the photo smaller so I can see the entire image.@media only screen and (max-width: 767px) { #photo-center .av-parallax .av-parallax-inner { background-position: 50% 50% !important; height: 320px !important; } } /*move background image*/Thank you Ismael! you can close this topic..
Hi Andy,
We are not talking about that anymore. It’s the phone number that is light on iPhone but not Android. You can see the screenshots here..
Andy,
This CSS caused a problem so I removed it.
1. The CSS worked on the instagram widget sort of, but it also made every image using lightbox at 80×80 (I changed that value). So the Featured Image on all posts was a thumbnail. Can we change that code to be reserved ONLY to the Instagram Widget?
2. When I make the browser window smaller, the instagram widget then becomes distorted. (See Screenshot below) So this code does not keep the thumbnails proportional.
2. This is all the code we have created for this to get it in the correct location and sized. Seems like a lot. Is this all necessary to accomplish this or is this a bit overkill? The padding is necessary to keep the element from crowding the “INSTAGRAM” wigit title.
/*Footer*/ .av-instagram-pics.av-instagram-size-thumbnail { width: 70%; padding-top: 12px !important; } .av-instagram-item { padding: 1px; } .av-instagram-item:hover a { opacity: .5; } /*instagram hover effect*/ .widget-easy-twitter-feed-widget-container .row { margin-bottom: 0; } a.lightbox-added ing { (REMOVED) width: 80px; height: 80px; } /*instagram dimension*/Thank you Andy! I’ll check out that article.
Almost perfect.
Look at the first screenshot. The section is too large in portrait mode but it is good for landscape mode. What are you recommendations? That section should not be twice the height of the image slider at the top of the page. The image slider is the focus, the header, not this section.
I like this element but I’d like to find a solution for all my sites. I’d like to continue to use it.
Thanks!
Thanks Ismael. I still have several other posts, one that has not been answered for 4 days. Some you were helping me with. Normally it doesn’t take 4 days. Is there something I can do to ensure they are answered more quickly? Will you take a look please. I’ve put the links in the section below.
You can close this topic.
Thanks,
Jas
Yes this is conflicting:
.responsive.html_header_top.html_mobile_menu_tablet #header_main .social_bookmarks { display: block!important; top: -30px!important; } /*icons postion*/I changed it to this
@media only screen and (max-width: 479px) { .responsive.html_header_top.html_mobile_menu_tablet #header_main .social_bookmarks { display: block!important; top: -30px!important; }} /*icons postion*/Thank you. You can close this topic!
Hi Andy,
You are correct. The screenshot looks exactly like my website. And it’s wrong.
I’ve zoomed in so you can see what I see. See screenshot below.
The photo thumbnails are NOT spaced evenly. They are not pixel perfect and with my perfect vision, on a retina Macbook, I can see the inconsistencies easily. Very easy to see.
I have numbered the screenshot:
Thumbnail 1 and 2 are at equal height. Thumbnail 3 is not. It is a few pixels higher.
Spacing A is different than spacing B by a few pixels.If you are unable to see what I am talking about in this screenshot will you please ask another option of one of your colleagues to take a look?
This plugin has a bug in the code. The Instagram thumbnails are both uneven on my site and they are uneven on your demo page here >
http://kriesi.at/themes/enfold-lifestyle-blog/Again, I can easily see the inconsistencies. As soon as I activated the widget, I saw it in one second. this plugin absolutely needs a recode. There are many out there for sale $$ that do not have this issue. As I am developer, I would prefer to use the free plugin that comes with Enfold and have it work as expected.
Thank you for your help Andy,
Jas
Hi Ismael,
Thank you for that info. Ok lets limit this discussion to Site 1 listed above, for now.
I added a height: 110px!important; to the CSS. This was to center the icons.
@media only screen and (max-width: 767px) { #top #wrap_all #photo-center .flex_column.av_one_third { width: 31%; height: 110px!important; float: left; clear: none; margin-left: 1%; } } /*Content Element: Icon*/There are a few problems:
1a. Portrait orientation – The section is still to tall. It is much larger than the slider > which should be the focus of the page.
1b. Landscape orientation – Perfectly proportional.
Is this difficult to change one without affecting the other? I would be ok if the landscape view section was smaller. That is ok.2. The icons are text are too large. They don’t look like they are proportional to a mobile site. Will you add some CSS to the above to shrink the icons and text? Perhaps this will help the section height problem.
3. The background image needs to move left. I used this CSS some months ago and now it seems to have no effect now?? It’s not working.
@media only screen and (max-width: 767px) { #photo-center .av-parallax.avia-full-stretch.active-parallax { background-position: 35%!important; }}Thanks for your help!
Jas
Yes on Android it looks good.
On iPhone it has a problem. Why? This may have something to do with visited or hover color?
See below…
Thank you
Hello,
For some reason the social icons have disappeared again from the desktop site.
The mobile site is perfect.
I added the CSS you suggested above and altered it slightly.
#header_main .noLightbox.social_bookmarks.icon_count_5 { top: 15px; }#top .av_header_glassy.av_header_transparency .social_bookmarks li, #top .av_header_glassy.av_header_transparency .social_bookmarks li a { height: 45px!important; line-height: 45px!important; } /*corrects social header bookmarks issue*/Perhaps there is some conflicting CSS?
Thank you,
Jas
Hi Andy,
Here is exactly what I need. I need all the thumbnails in the instagram block to be exactly the same size to the pixel. Right now if you look closer, you will see that the image blocks, and the spacing are off, both on the desktop site and the mobile site. Before I added all the CSS above, it was very obvious. The CSS made it better but does not fix the problem completely. This is a bug in the plugin. I have said this all throughout this post several times.
The image blocks in the plugin are affected by the dimensions of the image. This plugin is expecting all images that are on instagram to be perfectly square and they are not. It is possible and people frequently upload images to instagram in landscape dimension. Instagram has not, for a long time, forced the square dimension. Until this bug in this plugin is fixed I would like CSS to make these blocks exactly the same size to the pixel.
Here is your demo. If you look at it you will see that the blocks are not evenly spaced. Especially around the center block.
http://kriesi.at/themes/enfold-lifestyle-blog/Please see my annotated screenshot below.
Please alert whomever the developer is for this plugin of this bug in the code. In the mean time, if you have CSS that will fix this I’d appreciate it.
Thank you,
Jas
Thanks. The CSS is in place. As you can see this only affects “For Appointment Call” The phone number is still light grey. Ideas?
Thanks,
Jas
Thank Vinay but Ugh. The title of this topic is “Mobile Menu…” All posts on this topic are mobile related.
Let’s start over.
1. I removed the CSS you gave me above because it was making the desktop site appear dark.
2. I’d like CSS for the mobile site ONLY.
3. I’d like the desktop site to stay exactly as it is. It’s perfect.
Thank you,
Jasmer
Hi Vinnie,
It worked 50% :) It made the sentence before the phone number appear “For Appointment Please Call”. However, the phone number is still barley visible. CSS?
Thank you,
Jas
1. Hi I was referring to the site in this comment above. :)
https://kriesi.at/support/topic/mobile-menu-social-icons/#post-577370
I just had to add !important, !important, !important. Then it worked.
Last question: The phone number is the top of the header is too light. Can we make it color: #555555 as well?
Thank you Ismael
I put this in quick CSS and this is all I did.
.av-instagram-item, .av-instagram-item img, .av-instagram-item a { min-height: 132px; }The screenshot was from the website
Thanks,
Jas
Thank you! Can we do the same thing for the site below? I need to force the icons to show and to be in the correct place. The header is different on this one so we might not need the icon placement float:left??
Jas
