VIWW Posted October 30, 2022 Share Posted October 30, 2022 Hello! I've seen similar threads regarding this but I'm struggling to figure out if it is possible to correct my issue. I have an FAQ page that I like the appearance of while in Desktop mode, but in Mobile mode it stacks awkwardly with photos appearing before and after the FAQs. Am I able to make the Mobile version display in columns instead of stacked on top of eachother? Thank you! Link to comment
tuanphan Posted October 31, 2022 Share Posted October 31, 2022 Hi, Can you share link to page in screenshot? We can check easier 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
VIWW Posted October 31, 2022 Author Share Posted October 31, 2022 Sorry I thought I had!https://www.vancouverislandwhalewatch.com/faq Link to comment
tuanphan Posted November 4, 2022 Share Posted November 4, 2022 On 11/1/2022 at 12:10 AM, VIWW said: Sorry I thought I had!https://www.vancouverislandwhalewatch.com/faq If display columns, it will be very small See my screenshot, I tested some code to make columns on my browser 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
VIWW Posted November 5, 2022 Author Share Posted November 5, 2022 On 11/4/2022 at 12:43 AM, tuanphan said: If display columns, it will be very small See my screenshot, I tested some code to make columns on my browser Is there any way I could disable the photos in the mobile version, and still have them present on the desktop version? Link to comment
VIWW Posted November 5, 2022 Author Share Posted November 5, 2022 On 11/4/2022 at 12:43 AM, tuanphan said: If display columns, it will be very small See my screenshot, I tested some code to make columns on my browser I ended up writing this up, which did what I wanted to accomplish: // HIDDEN ELEMENTS ON MOBILE @media only screen and (max-width: 768px) {#block-yui_3_17_2_1_1667155492115_6694, #block-yui_3_17_2_1_1667155492115_17548, #block-yui_3_17_2_1_1667155937657_12880, #block-yui_3_17_2_1_1667155937657_284779, #block-yui_3_17_2_1_1667155937657_286207, #block-yui_3_17_2_1_1667155937657_98272, #block-yui_3_17_2_1_1667155937657_283360, #block-yui_3_17_2_1_1667155937657_281940, #block-yui_3_17_2_1_1667155492115_15949, #block-yui_3_17_2_1_1667155937657_14506, #block-yui_3_17_2_1_1667155492115_9830 {display: none;} } Does this look good, or is there a way to make the coding a bit more concise? Thank you again for all your help! Link to comment
tuanphan Posted November 8, 2022 Share Posted November 8, 2022 On 11/6/2022 at 3:53 AM, VIWW said: I ended up writing this up, which did what I wanted to accomplish: // HIDDEN ELEMENTS ON MOBILE @media only screen and (max-width: 768px) {#block-yui_3_17_2_1_1667155492115_6694, #block-yui_3_17_2_1_1667155492115_17548, #block-yui_3_17_2_1_1667155937657_12880, #block-yui_3_17_2_1_1667155937657_284779, #block-yui_3_17_2_1_1667155937657_286207, #block-yui_3_17_2_1_1667155937657_98272, #block-yui_3_17_2_1_1667155937657_283360, #block-yui_3_17_2_1_1667155937657_281940, #block-yui_3_17_2_1_1667155492115_15949, #block-yui_3_17_2_1_1667155937657_14506, #block-yui_3_17_2_1_1667155492115_9830 {display: none;} } Does this look good, or is there a way to make the coding a bit more concise? Thank you again for all your help! I see that code is fine. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment