Adjust sections and buttons for mobile view through CSS

[Nalwi]

Hi, while working on the mobile view, there were some sections that I wanted to be centered, but for the web view, I wanted it to be aligned left. I did this by duplicating the section for the mobile view and aligned it to the center and hid it for the web view, which is fine. But I had done this throughout the website and there are many sections where I have made changes to the content, and having to constantly update the same sections in the mobile view can be tiresome and might lead to errors. Is there any way that this could be resolved where the content remains the same for all the views, but the alignment can be changed? OR could I get rid of the hidden mobile view sections that I have created, and use CSS to align certain buttons and images just for the mobile view? This would make things much easier for me as we’re going through constant updates and changes.

[ruenel]

Hello @Nalwi,

Thanks for posting in! This issue seems related to the other thread which we just responded.
We need to resolve that first before jumping at anything to avoid any complications and confusions.

Your other thread: Website layout suddenly changed

Best Regards.

[Nalwi]

Hi @ruenel, thanks for your reply. I have made the adjustments from the other thread and that issue is resolved.
Is it possible to adjust the button alignment (as seen in the screenshot) only for the mobile view? Without having to create and hide sections. As mentioned previously, it would be very helpful as it would make it easier to update content, without having to constantly switch to the mobile view and update the section.

[ruenel]

Hey @Nalwi,

I have checked your page and I can see that you have a section that displays in smaller screens. The buttons are already centered.

Regards.

[Nalwi]

Hi could you please check again.

[ruenel]

Hello @Nalwi,

The buttons are aligned as inline-block. To be able to center the buttons, you will have to center it in the column settings. Regretfully it is not possible that you can have left alignment in desktop screens while having a center alignment in smaller screens. You must center it on all screen sizes instead.

If you are going to use CSS, you will need to insert an inline element CSS in the column settings like:

@media(max-width: 767px){
  $el {
    text-align: center;
  }
}

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance.

Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg
• Text Alignment - https://www.w3schools.com/cssref/pr_text_text-align.ASP

[Nalwi]

Yup, this is fine. Thank you very much for your response. Could you please also remove the screenshots I have shared.

[marc_a]

Hi @Nalwi,

I have don removing the screenshots you have shared.

You’re welcome and it’s our pleasure to help you. If you have any other concerns, feel free to reach us.

Thank you.