-
Posts
-
Hi Team,
I want to display 2 small widgets / photos – 36x36px – next to each other and showing in the center of the screen, both on Desktop and Mobile.
Last night when I implemented it, I believe it had at first worked on all screen sizes. However, now the 2 widgets / photos are showing in 2 separate lines on Mobile:
What do I need to change in the Settings to bring them next 2 each other, regardless of Screen Size?
Thank you!
Hi @guenni007 and hi @yigit
You might know what my mistake is here :) I’ve tried both Color section and Grid row and neither works. How would you set this up to have the 2 widgets next to each other on Mobile as well?
Hi,
Thank you for the inquiry.
You can use this css code to adjust the style of the columns containing the icons on mobile view.
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ #top #wrap_all .flex_column.av-kzbx94lc-0865b210f7d84bd719b709dfe2b258da, #top #wrap_all .flex_column.av-kzbx3c10-9015bc4b90fe961b12754f30ae1ac4a2 { width: 49%; float: left; } }Best regards,
IsmaelHi @Ismael
What I am supposed to add where you wrote “/* Add your Mobile Styles here */”? What do you mean with Mobile Styles?
I always want to show the 2 columns that contain the 2 tiny images in 1 row, regardless of screen size. Please see the 2 images highlighted here in Green: https://savvyify.com/img/image/f2D3
Thank you again!
Hi,
Thank you for the update.
They are already side by side on desktop view, so we created a new css media query to adjust the icons on mobile view. Did you try the css code above?
What I am supposed to add where you wrote “/* Add your Mobile Styles here */”?
That is a css comment. You can remove it if you want.
Best regards,
IsmaelHi Ismael,
Thank you – both images/widgets do appear in the same row now! :)
To make it the same as on Desktop, I would still like to add a 1% Space Between Columns. What do we need to add to the Quick CSS code to make that work?
Also, the code currently only works on the “Home” page.. when you go to any other page on my website, the two widgets/photos are still in 2 separate lines on Mobile. What do we need to add for this to apply it across all pages?
Thank you! :-)
Hi @Ismael
There seems to be still some problem on some sizes: When I reduce the screen size on my laptop to the minimum (I would assume that’s tablet size?), then the 2 images still jump into 2 rows: https://savvyify.com/img/image/ft1f
I believe that’s why because the Quick CSS you provided only applies to actual mobiles and tablets, not laptops?
Hi,
I believe that’s why because the Quick CSS you provided only applies to actual mobiles and tablets, not laptops?
Yes, the current css media query is for screens smaller than 768px. You may need to adjust the max-width value in the css media query in order to cover larger screens. We also applied a 1% left margin to the columns.
@media only screen and (max-width: 1024px) { /* Add your Mobile Styles here */ #top #wrap_all .flex_column.av-kzbx94lc-0865b210f7d84bd719b709dfe2b258da, #top #wrap_all .flex_column.av-kzbx3c10-9015bc4b90fe961b12754f30ae1ac4a2 { width: 49%; float: left; margin-left: 1%; } }Best regards,
IsmaelHi @Ismael
It works perfectly now on my main “Home” page!
2 last questions:
1) To make it work across all pages, can I just save the color section (in which the 2 images/widgets are in) and add it on the other pages?
2) I would like to remove some space below the 2 widgets/images across all screen sizes. However when checking for padding and spacing, it shows 0px everywhere already. How can I decrease the space between the 2 widgets and the bottom of the page in this case?Thank you again, really appreciate it! :-)
Hi,
Thanks for the update.
1.) You have to add a custom css class name or ID to the columns and replace the autogenerated column ID that we used above to target the columns. You can then save the content as template and use it on other pages, or you can set place the elements in a different page and set it as footer in the Enfold > Footer > Default Footer & Socket Settings settings.
2.) That is the color section padding. You can adjust it by editing the color section’s Layout > Margin & Padding > Section Padding settings.
Best regards,
IsmaelHi @Ismael
I added the name “footer-final” in the color section’s Developer Settings under custom CSS class. However when expecting the page (see link below), I can’t see “footer-final” reflected anywhere in the footer. Could you please check why it may not be working / what I did incorrectly?
Also, what exactly do I need to replace in the below code for “footer-final” to make it work? I replace this whole string “.flex_column.av-kzbx94lc-0865b210f7d84bd719b709dfe2b258da”?
@media only screen and (max-width: 767px) {
#top #wrap_all .flex_column.av-kzbx94lc-0865b210f7d84bd719b709dfe2b258da, #top #wrap_all .flex_column.av-kzbx3c10-9015bc4b90fe961b12754f30ae1ac4a2 {
width: 49%;
float: left;
margin-left: 1%;
}
}The footer is a color section, not a column, hence I’m also a bit confused.
Thank you in advance for your guidance!
Hi @ismael
I added the namings “mf-footer-mail” and “mf-footer-linkedin” to the 2 columns as “Custom ID Attribute” (and also added “mf-footer” as the “Custom ID Attribute” for the color section, however it’s still not clear for me what I need to replace in the code to make it work across all pages:
@media only screen and (max-width: 767px) {
#top #wrap_all .flex_column.av-kzbx94lc-0865b210f7d84bd719b709dfe2b258da, #top #wrap_all .flex_column.av-kzbx3c10-9015bc4b90fe961b12754f30ae1ac4a2 {
width: 49%;
float: left;
margin-left: 1%;
}
}When I got into Inspect on the page, I cannot find columns named “mf-footer-mail” and “mf-footer-linkedin”.
Could you please help me to be able to finalize this?
Thank you,
Hi,
I’ll try to catch up where you are in this thread, I see you two custom ID’s named “mf-footer-mail” and “mf-footer-linkedin”
and I see that you have this css in your stylesheet:@media only screen and (max-width: 767px) { #top #wrap_all #mf-footer-mail, #top #wrap_all #mf-footer-linkedin { width: 49%; float: left; margin-left: 1%; } }and this seems to be working correctly on every page that I check, so is there anything more to help with this?
Best regards,
Mike
- You must be logged in to reply to this topic.