JamieC Posted July 3, 2020 Share Posted July 3, 2020 I have this portion of the page that looks amazing on desktop, but once i view the mobile version, it's messed up. desktop version: mobile version: i use code block for the icons (icons from Font Awesome) while and text for the text. an example of my font code is : <i class="fas fa-street-view fa-4x"></i> im trying to change and make my icon and text inline, so that for mobile version an icon + text will be on 1 line. i am new to coding and thus i try: <i class="fas fa-street-view fa-4x"></i><h3>18years old and above</h3> but the icon and text are on different lines... how can i code it so that it will look like this on mobile too? align to left but the icon and text should align horizontally too.. Link to comment
tuanphan Posted July 5, 2020 Share Posted July 5, 2020 Add to Home > Design > Custom CSS @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1593682388012_80440+.row>.col>.row { display: flex; width: 100%; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JamieC Posted July 6, 2020 Author Share Posted July 6, 2020 15 hours ago, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1593682388012_80440+.row>.col>.row { display: flex; width: 100%; } } Hi Tuanphan, thanks for the code, it works! My icons and text are now on the same line, however they are not aligned currently. This is how it looks like now on mobile version. Is there any way i can do to make the icons align centrally and the text all align to the left? So it will look something like this: Link to comment
Badge20 Posted December 15, 2020 Share Posted December 15, 2020 Hey there, Having the same issues over here, do you find a way to align the icon to the line of text? Thanks. Link to comment
JamieC Posted December 16, 2020 Author Share Posted December 16, 2020 @Badge20 unfortunately no, I ended up making my icon + text into a png image instead as an alternative solution Link to comment
Badge20 Posted December 17, 2020 Share Posted December 17, 2020 If it helps for anyone who finds this question later, I found a second fairly simple solution, though a bit more annoying if you're handing the site off to a client. I added my text into the code block that has the Font Awesome Icon and html styled it within there with spaces and line breaks, and was able to get it even with that. Link to comment
gregaitch Posted August 17, 2021 Share Posted August 17, 2021 @Badge20, could you share an example of that? Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.