Hey Mike,

Please see the screenshot attached now, hope it works this time.

The extra space is showing on Mobile between the heading “Case Study” and the text below for instance. The extra space appears basically everywhere on Mobile where I apply the setting “Row Layout” > “Equal Height” and “Middle”, even though this should only affect Desktop / Tablet. (My goal is to show the image – so for instance the graphic of the Golden Gate Bridge under “Case Study” – vertically in the middle on Desktop / Tablet).

Thank you again, I look forward to hearing what you think :)

Thank you Mike, that works perfectly now!

Apologies for the screenshot sharing – I thought I had it enabled to be visible. Will double-check next time.

Best regards,
Markus

Please also see the 2 screenshots for reference (current status of my slider vs. Reboot Experience site)

Thank you @guenni007, that’s very helpful! It looks much better now! :-)
And yes, this is the page I’m building!

To make the top of the page perfect:
For the “red banner” at the top of the page, I would like to show the first 2 words of the main heading (“Negotiation Techniques”) in the 1st line – right now “Techniques” is breaking and showing in the 2nd line. Do you know an easy way of how to achieve this? I don’t seem to be able to set a specific font size as I’m using Special Heading.

As you’re very good with alignments, I’d also like to ask you about these two:
1. I would like the image (portrait photo) in the section “About the Instructor” to be aligned with no space in between with the next section “Reviews”. I tried out everything in the settings, however do not manage to bring the image down. Do you know of an easy way of how to achieve this?

2. In the section “The Masterclass”, there are 3 images that I use for the 3 different sub-topics (“Negotiation Blueprint”, etc.). I would like them to be displayed a bit smaller, however don’t manage to add a transparent border or spacing around them to do so. Do you know by any chance how to do that?

Thank you again, I really appreciate your advices!! :-)

Please also see screenshot attached of how I would like the Rotation to display on Mobile. This example is also from here (https://www.rebootexperiences.com/).

Hi @guenni007

One more question to you as the lines left and right of the headlines on Mobile don’t look good – please see the screenshot attached (you can see 3 headlines). Due to the small width of the Mobile screen, the lines have a different lengths and it looks unprofessional. Hence I’d like to remove them for Mobile only.

Would you be able to share the Quick CSS code with me please to be able to remove them for Mobile only?

Thank you again, your support has been tremendous!

Hi Rikard,

Thank you for your suggestions and help! I have a few open follow up questions:

1. Your advice here works very well – heading size now looks great on Desktop and Mobile! I have one more question to make the heading exactly the way it was designed: The line should break after “…who strive to” so that “Secure Maximum Value” falls into the next line. I’m not able to add “<br class=”avia-permanent-lb” />” to the heading title though. Is there a way to achieve a line break in the heading?

2. Font size is great now! What CSS code do I need to add though to make the font Bold?

3. I added a Separator/Whitespace element inside the right cell as you suggested. It didn’t change the image size on Mobile though and in addition the Separator/Whitespace element is now visible (please see the link to the current status below in private content). What do you advise to achieve showing the entire image on Mobile as well while not having any “visible overlay” on top of it?

Thank you again,
Markus

Thank you – I figured it out with the Quick CSS code you shared! It’s working great now – including the width!

:-)

Hi Guenni,

Thank you for your recommendation, that sounds great!

Where do I change / adapt the code / line though? I cannot see any option to paste the CSS / code in when using the Special Heading.

Please let me know where exactly I find it so I can change the line to the one you sent.

Thank you again!
Markus

Hi Rikard,

Thank you so much for your guidance on this, very helpful! As you can see #1 and #2 look great now!

I am still struggling with point #3. I have played around with the Grid Row element – please see the current version (https://negotiations-masterclass.com/) – and am encountering the following 2 issues:

a. While I managed to increase the font size through HTML code snippets for desktop, it looks off on mobile (it’s a good size for desktop however looks oversized on mobile). In addition, the line spacing doesn’t work on neither desktop and mobile.
How would you recommend changing it so it looks good?

b. Based on the current layout/design, the image is displayed based on the text size and volume on the left hand side. However, I would like the full image to be displayed. I selected “Stretch Image”, however then the image isn’t fully visible. When I select other options, the space isn’t filled on the right.
Displaying the full image is also important for Mobile. If you have a look at the mobile layout right now, the image currently fills almost the entire first page. It should only fill about 25-35%, which would be the case if the entire image was displayed.
What would you recommend?

As it may be helpful for you, I’m trying to adapt a design that is similar to this website to start with: https://online.hbs.edu/courses/negotiation/

Thank you,
Markus