Desktop to Mobile on Pro

Support
#1

Hi There

Started using Pro and have to say whilst it is very slick and allows full customisation for desktop sites, when I check the appearance on mobile it is very messy, At the moment I am playing about with a header development for a new site I am building but when I view it on mobile, the site looks awful. When I then attempt to make changes to the layout it makes changes across all of the platforms. How on earth do I fix this as it is very time consuming to try and build the same header on mobile seprately. Am I missing something?

Also, with X theme there were many pre-created demo sites we could utilise. Are these features not available with PRO? Thanks

Nikos

#2

Hello @Koukos,

Thanks for asking. :slight_smile:

  1. In your header builder Bar > Flex Layout > Layout select Wrap Children and see how it goes.
  2. In Pro theme you don’t get demo contents similar to the X Theme. Instead Pro Theme comes with Design Cloud. Please take a look at following resources to learn more about Design Cloud.

Thanks.

#3

Thanks for the swift response.

Unfortunately this option is not optimising for differing platforms. I am aware of Design Cloud Templates which I am using for my header (using the Like You Mean it Template). The thing is it looks great on desktop but really cant optimise for tabelet mobile.

Nikos

#4

Hi Nikos,

All of the demo templates are responsive by default (http://demo.theme.co/designcloud/headers/like-you-mean-it/)

Sorry that you’re having that responsive issue, but the major reason for that is you use huge and negative margins on your container and elements. If you don’t mind please duplicate your header and do experiments on that duplicate header, remove all the huge and negative margins you have, remove the fix width (200px) on the button and apply it as a min-width instead.

width is a fixed value and not responsive so with 2 buttons (200px + 200px), that is 400px from that you’ll know that your buttons will be cut off on screens lower than 400px.

Remove those huge and negative margins and fixed width, and try to do everything within the Flexbox options.

Using Flexbox

Let us know how it goes,
Thanks,

#5

I think I see the issue. So I have started a new sample template to mess around with. So I am looking to add two buttons side by side each other but below my headline text and center them. This is where I seem to be struggling. Can you perhaps advise?

Essentially within my container I have headline text. I then added my two buttons, select column to stack them below headline text. At this point I wish to have the buttons on the same row. How can I achieve this?

#6

Hey Nikolas,

For your setup, it would be best that you add a new container and move your buttons to the new container and set the Flex Layout to Row. For more details, please see my screencast at https://youtu.be/sw1SFrup_wc

If you want the buttons to stack on mobile, you can enable the Wrap Children option in the Container. See https://youtu.be/xYlhLpcvWL8

Hope that helps.

#7

Brilliant. Finally got it. I was forgetting about addition of new containers. Great help and flexbox is really good. Will probably just take some practice. Thanks for your patience and help. Regards

#8

You are most welcome. :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.