Content Element: Icon – On Mobile Site

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

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!

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*/

Sorry the precise link is above. Site #1 in Private Content
#post-580249

The screenshot is also above here. #1a in Private Content
#post-583850

Thank you

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

This does not work. It only makes the photo shorter.

As you can see the background stays large.

So to be clear. The color section is not height adjusting with this CSS

I’d be happy to stop posting on this topic but the CSS you are giving me isn’t working

doesn’t work

@media only screen and (max-width: 767px) {
#photo-center .av-parallax .av-parallax-inner {
height: 200px !important;
}}

Thank you,

Jas

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, 10 months ago by Jasmer.

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*/

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

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

HI Yigit!

Almost! First, THANK YOU for helping me. I appreciate your time. My goal is to make this work for all my sites. I”m sure when I solve it for this site it will work for all other sites. I am going to try to not be too picky :) but here is what has happened.

I. On iPhone 6s Plus the icons were not centered so I adjusted the code to center the icons within the circles.
see screenshot 1
This part I changed from -10px to -2px

#photo-center a.av-icon-char:before {
    left: -2px;
    position: relative;
}

II. Result > caused center icons to be off-center on Android and iPhone 4s screens. I”m guessing it is probably off center for your iPhone 5s. Hmm.
see screenshot 2.

III. Objectives:
A. I am trying to achieve the same dimensions for header slider and this icon section. On the iPhone 6s Plus, and I think on the iPhone 6 they are the same size.
B. I am trying to achieve centering of all icons on all mobile devices.

IV. I moved ALL code we’ve added throughout this thread to the bottom of quick CSS. Perhaps something is conflicting?

/*mobile - icon - color section content*/

@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*/

@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*/

@media only screen and (max-width: 767px) {
#photo-center .av-parallax .av-parallax-inner {
    background-position: 50% 50% !important;
    height: 165px !important;
}} /*move background image*/

@media only screen and (max-width: 767px) {
.avia-section {
height: 165px;
}} /*adjust color section size*/

@media only screen and (max-width: 767px) {
span.av_font_icon.avia_animate_when_visible.av-icon-style-border.av-no-color.avia-icon-pos-center.avia_start_animation.avia_start_delayed_animation {
position: relative;
top: -40px;
}}

@media only screen and (max-width: 480px) {
#photo-center a.av-icon-char {
    width: 15px!important;
    height: 15px!important;
    line-height: 15px!important;
}
#photo-center a.av-icon-char:before {
    left: -2px;
    position: relative;
}
#photo-center .av_icon_caption {
    font-size: 13px;
}}

Hi Yigit,

Thank you so much for helping me. This isn’t working. I think I may have an error in my CSS somewhere. You can take a look if you like. ALSO, I tried to move ALL CSS from quick CSS to Editor > style.css so I could have more room to work. Once I moved the CSS from Quick CSS to style.css, none of the CSS worked at all. So, I put it all back.

1. Do you know why no CSS is applied when deleting from Quick CSS to moving to style.css?

2. I attempted to change the values and it has no effect on my iPhone 6s Plus. The center icons are way to the right off-center. (see screenshot). I tried !important.

3. It looks perfect on an Android HTC ONE, iPhone 5s and iPhone 4s but looks not good on an iPhone 6. I had to edit the values a few pixels in a couple of locations.

4. This is ALL the CSS I have so far. We are almost there. This will be good so I can use it on my other sites!

/*mobile - icon - color section content*/

@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*/

@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*/

@media only screen and (max-width: 767px) {
#photo-center .av-parallax .av-parallax-inner {
    background-position: 50% 50% !important;
    height: 165px !important;
}} /*move background image*/

@media only screen and (max-width: 767px) {
.avia-section {
height: 165px;
}} /*adjust color section size*/

@media only screen and (max-width: 767px) {
span.av_font_icon.avia_animate_when_visible.av-icon-style-border.av-no-color.avia-icon-pos-center.avia_start_animation.avia_start_delayed_animation {
position: relative;
top: -40px;
}} /*icon element position height*/

@media only screen and (max-width: 480px) {
#photo-center a.av-icon-char {
    width: 15px!important;
    height: 15px!important;
    line-height: 13px!important;
} /*center icon position in icon element*/

#photo-center a.av-icon-char:before {
    left: -12px;
    position: relative;
}

#photo-center .av_icon_caption {
    font-size: 13px;
}}

@media only screen and (max-width: 580px) and (min-width: 481px) {
#photo-center a.av-icon-char:before {
    left: -2px;
    position: relative;
}}

• This reply was modified 8 years, 9 months ago by Jasmer. Reason: Updated Screenshots

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