Content not aligned on mobile devices

Support
#1

Hi there, i can´t align content/text on this pages for mobile devices for this pages:
http://criarvalor.pt/novo/en/corporate/
http://criarvalor.pt/novo/en/private/
http://criarvalor.pt/novo/en/the-team/

#2

Hi There,

Thanks for writing in!
Can you please send us your login details in a secure note so that we can have a look on to your issue.

Thanks

#3

Done basanta.

#4

Hey @jlampreia,

You’re manually using an image and text in a Text element. In that setup, you need custom CSS to align your content perfectly on different devices. Giving you custom CSS would take development time though so this is outside the scope of our support.

I’d recommend that you use either the Feature Box or Feature List element instead. You can see those elements in action here.

Thanks.

#5

Thanks christian, i will try that.

#6

You’re welcome :slight_smile:

Let us know how it goes.

#7

Hi Bappy, i can´t align content in the featured box, can you give me a help?

#8

Hi There,

That is because the amount of padding you set on your section

Try using % Instead of em.

Alternatively you can set on the ROW > Customize > Inline CSS : max-width: 1300px; and no padding on the section.

Let us know how it goes

#9

I´m a dummy in css, i need to achieve this:

#10

Hi There,

Instead of using 5 columns, use just 1 column.

I reccomend you creating two different sections. One for mobile and One for desktop.

On the desktop version you will use the code as follows :

<p style=" font-size: 25px; text-align: left;"><img style=" margin-top: 7px; float: left; margin-right: 10px;" src="http://criarvalor.pt/novo/wp-content/uploads/2017/11/Icon-1-1.png" alt="" width="50" class="size-full wp-image-133 aligncenter" />Business Consulting</p>

And on mobile:

<p style=" font-size: 25px; text-align: center;"><img src="http://criarvalor.pt/novo/wp-content/uploads/2017/11/Icon-1-1.png" alt="" width="50" class="size-full wp-image-133 aligncenter" />Business Consulting</p>

Hope it helps!

#11

Hi Joao, thank you for your patience, i have 3 featured box, not 5 columns, maybe you are confused because of the other items on image. What i want to align are the red/white blocks in image. To be like this example:

#12

Hi There!

Sorry for the confusion, to achieve similar style please use classic feature list.

and follow the setting s as per the screenshot given. Instead of icon you can use your custom image icon.

Hope this helps!

Thanks

#13

Thank you basanta, yes it helps, but now i need to align text next to image.

#14

If i use this: “margin-left: 200px;”
I think will work

#15

Hi There,

That might work, but that is too huge of a margin it might hunt you back on responsive design.

You can achieve the same layout, by adding a max width on the Feature List Element

screenshot

Thanks,

#16

Thank´s friech, you helped.
Need a help to align 6 element on a classic featured box, because they are outside desktop view.

#17

Hi there,

They are properly aligned, but the background is small to cover the entire layout. Plus, you defined the background size which make look different on some devices

    background-image: url(http://criarvalor.pt/novo/wp-content/uploads/2017/11/Silhouette-Sketch-Grey.png),url(http://criarvalor.pt/novo/wp-content/uploads/2017/11/Grey-Brushtroke.png);
    background-size: 1188px 192px,1060px 457px;

Instead of applying that background directly to .site, how about applying it to the section or row where the icons are? Then have it size to be 100% to make it responsive. But if you prefer that way, then please add about 150px to existing background size.

Thanks!

#18

Thanks for the tip Rad, i ad some px to background size and it´s very nice.

#19

Glad to hear it.

Cheers!

#20

Any ideia on how to get this design?

?