Building blocks: links, desktop/mobile appearance, text settings

[jeremybury]

Hi!

I am trying to build my website with Pro from Integrity bands template.
I am facing some difficulties on this page (it’s supposed to be the home page): http://new2020.jeremybury.fr/home-jb-9-avril/

Under the first (big) picture, I would like 2 blocks on the same line (“Section 2”/ “Row 1” on the screenshot) on desktop but on 2 lines on mobile phones.

I have 1 row and 2 columns. For each column, I have selected a background lower layer.
But I have some problems:

1. The height of the section is too small and the picture is cropped… I would like to set the height of the section. However, on mobile phones, it looks good.
2. I would like to add a link on each column but I cannot find where to add this link;
3. I don’t find the right way to adjust the settings of the texts. I have tried different things but either it’s too big on desktop but ok on mobile, either the opposite… or the position is good on desktop but not on mobile (or the opposite)

Thanks a lot for your help!

[ruenel]

Hello Jeremy,

Thanks for writing in!

1.) You can set a minimum height for each columns. You can do that by inserting a decent minimum height enough to display the image.

By the way, I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto; but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

2.) You cannot add a link to a column. What you can do is instead of using a text element inside the column, you can insert a button element. Style the button element;

• set the width and height to 100%
• remove the border and box shadows
• make it transparent backgrounds
• set the font family and font size to look like a headline

3.) You may need to apply responsive typography. Please navigate to Theme Options > Typography and adjust/reduce your Root Font Size for the respective screen sizes.

To learn more about the Root Font Size, please check this out: https://theme.co/docs/typography#how-to-set-root-font-characteristics

For more details about responsive typography and how you can use it to resolve your issue, please check out this changelog:

• https://theme.co/changelog/#theme-pro-1-1-0

Hope this helps.

[jeremybury]

Thanks! It helps a lot!

[lely]

You’re always welcome!

Cheers.