1. All media queries are combined. Thank you

2a. Yes the point I am making is that the CSS is perfect on ALL devices except the iPhone 6s Plus. If I adjust the CSS then it will not be perfect on all the other devices. (iPhones 4s,5s, 6 and Android HTCONE)

2b. You told me to change this CSS HERE

And this css declaration is not good because it will affect all color sections:

.avia-section {
height: 165px;
}

I pointed out that Andy told me to use that CSS
ANDY CSS HERE

The question is what do you want me to change it to? I understand logically what you are saying, but I’m not sure what the correct declaration is.

AND why is the section perfect on all devices except the iPhone 6s PLUS? And maybe other Androids that are that size?

ALSO if you notice the icons inside the circles are very tiny on the 6s Plus. Look at it on your phone to contrast.

PLEASE log in and look at my CSS and tell me what you think is causing the problem. You have logged in before for me on a mother site some time ago. If I ever needed it I need it now.

I am 99% of the way there. I have the last small problem left to solve then I can use this CSS on all other site with this element.

I really think after many days have passed that you have to go back to reread what is going on. This post I am making today is mainly repetitive. I know it’s been a bit confusing and I greatly appreciate your help.

Thank you in advance,

Jasmer

Hi,

Thanks.

1. Per your suggestion I changed I combined the CSS into one. Thank you this is good to know. I see 4 “@media only screen and (max-width: 767px)” Does this mean I need to combine all 4 in the list above?
So far, it does not change the iPhone 6s Plus (see below)

2. This is the CSS Andy gave me here. What CSS do you suggest? This is a little tricky.
Andy CSS Here

Thank you for your help!

Jas

Almost!

1. This created a small problem in the search bar. The search icon border became longer.

2. While we are here can we adjust the size and radius of the search field to match the others? Number 1 above is probably correct we just need to make the input field larger vertically, then radius the corners.

3. I had to add this CSS to raise the top section subscribe button to match the bottom subscribe button.

p#subscribe-submit {
position:relative;top: -13px;
}

I have numbered in the screenshot below.

Thank you!

I think I discovered the issue. Please leave this open for a bit while I check it out. The errors could have been caused by Jetpack Photon (CDN). Apparently Jetpack uses mandrill app by MailChimp. Confusing I know.

The images above had an irregular character in the title. It was the accent in the word México. There were some other errors however so I’ll take a few days and check it out and get back to you.

Thanks,

Jas

Perfect thank you!

Question:

I have a child theme. What is the difference between:

1. Appearance > Edit CSS

2. Appearance > Editor > style.css

Is #1 not the Child CSS? and #2 is?

I want to move all my CSS out of Quick CSS to either #1 or #2.

Thank you

Thanks just need to lighten the date under the post titles then make sure they are still visible on hover. I think that should do it.

Thanks,

Jas

Hi Yigit,

That kind of caused the opposite problem. Hmm.

1. The date stamp is grey and can’t be seen

2. On hover the title text disappears. I think ti has to change on hover for the text to stay visible.

Thank you for your time,

Jas

Thanks Yigit!

Yes that fixed it but I lost the click-ability of the phone number. Can we get that back so people can click to dial?
I’m sure when we removed the link to dial that solved the issue because it made all text the same.

Here is the mobile device CSS that is currently active on the site.
It is near the top of Quick CSS

@media only screen and (max-width: 768px) {
#top .av_header_transparency .phone-info, #top .av_header_transparency .phone-info span {
    color: #555555!important;
}} /*phone info*/

Also I found this CSS for the desktop site. Could it be conflicting?
Desktop site looks perfect.
This is just below the code above.

.header-scrolled .phone-info span {
color: #8f8c8f;
}

Thank you

Thank you Andy,

It works. I have one question..

I like to have my CSS organized. So, I moved your CSS from the bottom of Quick CSS, to near the top of the Quick CSS.
When I put it at the top, it does not work.
When I put it back at the bottom it works.

I am cut and pasting and not changing anything as I have done many times. I’ve tried this several times with the same result.

Why does it matter where I put the CSS in the Quick CSS area? I need to know this for when I use it for my other sites. Should I try rearranging and moving it to the Child Theme CSS?

Thanks again,

Jas

Andy,

This CSS has no effect. I changed the value and added !important. Still no effect. If you can’t do it, then I definitely am not going to be able to learn CSS and make this work anytime soon.

A couple of times other support reps have asked me for my login credentials. That has been helpful in solving difficult problems. Perhaps you can take a look.

We have come this far. And we are one icon move from finishing. This is going to solve all of my other website problems. I use this element on all of my sites and I am 99% of the way to a solution.

Thank you,

Jas

This is almost perfect. I only need to center the icons now.

The problem is I cannot bring the icons up to the center no matter what px I put in here.. I started with 85px and went up to 485px. If I put in 1485px it doesn’t make any difference.

@media only screen and (max-width: 767px) {
#top #wrap_all #photo-center .flex_column.av_one_third {
    width: 31%;
    height: 485px!important;
    float: left;
    clear: none;
    margin-left: 1%;
}} /*content element: icon*/

Thanks. You are correct Andy. That is not what I am asking for. It just makes the site look broken. So..

1. I ONLY want to edit the color section height for mobile, as we have discussed at length in this topic.

2. If I adjust the size in the color section it will change the size on the desktop site which I did not want to do.

I’ve changed the CSS back to 320px. Do you know CSS that will work for the specific question I am asking for?

I’m 99% there.

Thanks,

Jas

• This reply was modified 8 years, 9 months ago by Jasmer.

1. This instagram plugin has a code problem and I helped you by reporting this bug. This is not me requesting a custom theme. As you can see > You thanked me earlier for pointing it out to you here..
#post-583517
“wow would have never seen this issue. Thanks for making us aware about it. Regards,
Andy”

2. I now have this CSS. I needed both to sort of solve some of the issues. If you go to the site (which I have included below) you will see when you resize it is still a problem slightly. The thumbnails become misaligned.

.av-instagram-pics.av-instagram-size-thumbnail a.lightbox-added {
width: 80px;
height: 80px;
}

and

.av-instagram-item {
width: 80px;
}

3. I or my clients which I have brought to Kriesi have bought 20+ themes. It is a significant investment. I’ll be happy to assist with making your job easier Andy and include links repeatedly in the private content area. Usually this has not been a problem in the past. This topic was to fix a problem with the code in the Instagram plugin.

Andy,

I’m very sorry. I don’t understand your english. You saying “this” and “it” and then you are telling me above to replace new CSS with old CSS. “replace it with the old one.” why would I replace new CSS with old CSS? Wouldn’t it be the other way around?

Here is what I have now. Please copy and paste the parts I need and I will delete the rest. Thank you.

.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;
}

.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;
}}

Andy,

See screenshot below:
The request is this: I want to adjust the height on the red box which is a color section background. None of the CSS above does this.

1. On several posts you’re telling me my problems seem to look ok to you. But they don’t look ok to me which is why I am posting a topic.

2. You’re telling me to post links that are already here in this post.

3. You’re telling me to post screenshots that are already here in this post.

This is happening in post after post. and if you look at my other topics I’ve never had this much trouble with any other rep. I don’t know why to say or do here. I think you and I just don’t work well together. When I am working with other reps I don’t have this problem.

Thank you for your help but this is taking 4 times as long as normal. Please just forward my posts to other reps. I’d appreciate it.

Jas