-
Posts
-
Hi
I have on my website a social media section that is divided into 5 columns. Three of them contain social media icons with a link to each social media platform. Here’s where you can see it: http://crescendo.staging.wpengine.com/#media (hosted on WPengine)
How do I get all three columns with content to fit into the the iPhone screen size? I tried sizing the columns (fiths) but that did not work.
Thanks so much
LyseHey tremblayly,
Do you mean the facebook, twitter, linkedin circular links? They seem to break under each other on mobile. Do you want them on one line?
Best regards,
Jordan ShannonHi 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
LyseHi,
Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) { .home #media .flex_column_table_cell { display: inline !important; width: 33% !important; float:left !important; } }Best regards,
RikardHi Rikard,
Sorry but the CSS code did not change anything. Also, this #media ID is global on three pages, so I perhaps do not need the “.home” (but even when I took it out of the code snippet, the change does not happen).
Thanks
LyseHi,
Could you perhaps try making a second section that displays only on mobile (and hidden on desktops/laptops) and is configured to show the icons one line?
Best regards,
Jordan ShannonHi Jordan,
I have done that for other sections, but for creating the icons on one like, I had difficulty. I could try again with your guidance. I will try first in a test page perhaps, unless you think it’s pretty straight forward.
Thanks
LyseHi,
Trying in a test page is fine, and then post the results. If its bad, I can log in an take a look.
Best regards,
Jordan ShannonHi 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
LyseHi,
You want them horizontal? Would you be able to provide a temporary admin login so I can see the page configuration?
Best regards,
Jordan ShannonHi,
I added the following to quick css along with changing the configuration of the test page you created and it seems to produce the result you needed. Please test:
@media only screen and (max-width: 767px){ #socialsection .flex_column.av_one_third.flex_column_div{ width:33.3%!important; } }Best regards,
Jordan ShannonHi Jordan,
It does produce the results I want for the mobile, but for the desktop it will not work. So I may have to create two separate sections per page where I use social media, with their own IDs to have these display correctly on both desktop and mobile.
My pages most particularly my home page sure has a lot of duplicated sections and all of their content updated every time. I really thought the theme was responsive and that this sort of customization would not be necessary.
Thanks
LyseHi 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.
LyseHi,
I`ve checked your site and I need that you remove this rule that disappears with the social icons and we can work with some column custom codes.
Best regards,
John TorvikHi John
I removed all of the CSS I did for the media sections and put back Jordan’s CSS code snippet into my custom styles.css file in my child theme where all of my cutomized CSS code is.
Lyse
Hi,
They were displaying inline after I put the code in earlier correct?
Best regards,
Jordan ShannonHi
When I change the width of the following CSS element to 30% on my page, I see all of the icons resizing to what I would look like on my iphone:
.flex_column_table{
display: table;
table-layout: fixed;
width: 30%!important;
}Could this be the element to target? I did try in my child theme custom styles.css but it’s not being applied.
Just trying different scenarios and I need this fixed soon.
Thanks
LyseHi,
Can we take this back to the beginning from where I left off. It was working on mobile, but not on desktop. What is the result you need on desktop?
Best regards,
Jordan ShannonHi Jordan,
The testing page display on my iphone did not work.
On my desktop I want the icons to display inline – so when I use 5 cols the icons display closer together. Width the width change you suggested to suit the iphone, the icon are too far apart in 3 cols.
On the iphone I want the icons to display inline and right now even with your CSS code where you reduce the width to 33.3% they still display one on top each other on my iphone.
Sorry if I sound frustrated, but it’s not at you….
LyseHi Jordan,
Just purged all cache again and again…..
What I see now on my iphone are the icon stacked but floating to the leftLyse
Hi,
Can u instead of purge cache, disable it completely, after clear your phone cache and tell us the results?
Thank youBest regards,
BasilisHi Andy
I use their tools they provide to purge all cache and server cache. I see the changes only after a few minutes. I do this purge often so have not experienced too much of an issue with seeing my changesUsually I would work on the staging, where there is no cache but I just published this past Sunday so trying to quickly get the mobile display issues working
Thank you
Lyse
- You must be logged in to reply to this topic.