Hi again Jordan,

Here are my CSS code snippets:

in Enfold general styling (I just changed the section ID):
@media only screen and (max-width: 767px){
#social-media-mobile .flex_column.av_one_third.flex_column_div{
width:33.3%!important;
}
}

in my custom styles.css file:
/* alternate social media icons display for mobile devices */
@media screen and (max-width: 767px) {
#social-media-desktop { display: none !important; }
#social-media-mobile { display: block !important;}
}
@media screen and (min-width: 767px) {
#social-media-desktop { display: block !important; }
#social-media-mobile { display: none !important; }
}

However, nothing works in terms of hiding one section one desktop nor on mobile.

Please tell me what I did wrong in trying to replicate the sections and trying to hide one and the other.

Thanks.
Lyse

Hi Nikko

The code is in my child theme custom styles.css. And yes it is for mobile devices only. I did clear server cache.

I have included credentials below.

Thanks
Lyse

Hi Jordan,

I sure do. I have provided you with credentials below.

Thanks
Lyse

Hi Jordan

I’m temporarily live. Here’s a link to a test page I created: https://www.impactcrescendo.com/testing/
How do get the icons aligned and centered?

Thanks
Lyse

Hi Yigit,

I tried again and also removed the previous code snippet that was provided earlier.

I did clear server cache and also tried the code on my staging area (where there is no server cache) and the caption still does not wrap like on the desktop or iPad. There should not be any text across faces or body of the people on the image and should be in a restricted block form like the others. The text is small enough to fit within a block.

My site is just on hold temporarily on production and if you wish you can see it here:

Thanks
Lyse

Hi Yigit,

I tried the CSS code snippet, but added the section IDs as it is a global change I want to apply for three pages. Here’s what I added

@media only screen and (max-width: 480px) {
#av_section_titles .avia_transform .av-extra-border-element.border-extra-arrow-down .av-extra-border-inner { top: -20px; }
}
@media only screen and (max-width: 480px) {
#av_section_titles-first .avia_transform .av-extra-border-element.border-extra-arrow-down .av-extra-border-inner { top: -20px; }
}

I’m sorry but the code does not work

Thanks
Lyse

Hi John

Sorry but that did not change anything. The buttons still don’t align and I do not see the font size changed.

Thanks
Lyse

Hi Sarah,

It’s also happening on my sliders on this page: http://crescendo.staging.wpengine.com/ (hosted on WPengine)

Thanks
Lyse

Hi Sarah,

Great explanation!

I added the CSS but it still not working properly.

Thanks
Lyse

Hi Ismael,

Here’s a screenshot of the issue I have on my coaching page for example on my iPad even when I use the grid row:
https://www.dropbox.com/s/fx3s19wttjbqg9z/coaching%20page%20on%20iPad.PNG?dl=0

Thanks
Lyse

Hi Jordan

Yes I do want them to display on one line on the iPhone. I can’t seem to find a way to do that because they are in columns.

Thanks
Lyse

Hi Nikko

I got it to work by changing the max width of the mobile device.

Thank you for your time
Lyse

Hi Sarah,

That is where I added the CSS code – my child theme styles.css.

I’m on my staging area so there is not cache and on my local machine I have cleared my cache.

I have included credentials below.

Thank you
Lyse

Hi Basiis,

You mean something like this (keeping same CSS code?):

@media screen and (max-width: 989px) {
#av_section_titles {
background-color: #4c4d4f!important;
border-top: 10px solid #ec5548!important;
height: 115px!important;
color: #ffffff!important;
margin-top:20px;
margin-bottom:20px;
}
}

Thanks for the quick response!
Lyse

Hi Andy,

I resized the images to be exactly the same size and they both look great!

Thank you
Lyse