Search code examples
cssresponsivetabletsquarespacescreen-size

How to make banner and image in banner section responsive to different screen sizes (e.g. tablet)

Site URL: deleted

Hi there,

how can I make my landing page on Squarespace responsive to different screen sizes by CSS? It is quite fine for mobile view, desktop and big screens. But it does not look good in between desktop and mobile view. the Logo gets too big or the banner is not full width so it is cut off on the right side (see screen shots). logo image too big banner cut off/not full width

Does anyone know what code I need to show the banner in full width and to avoid the logo (image) in the banner section getting too big on certain screen size?

Thank you for helping!

Solution

  • The options you have to remedy this are:

    1. Remove the numbers/text on the right from the image and upload a new image without the numbers/text. The, add the numbers/text via a code block and use CSS to absolutely position it within the section, anchoring it to the right-hand side.

    2. Set the anchor point of the image all the way to the right. This will keep the numbers/text in view at all times and avoid cutting it off. However, that means the buildings will often not be in view, and I assume the buildings are the focal point, so perhaps this is not a good option.

    3. Redo the graphic a bit so that the numbers/text on the right are further to the left, floating more to the middle, avoiding being cropped on most devices before the switch to mobile occurs and the section is hidden in favor of the mobile-specific section.

    4. Use CSS to override the focal point entirely and force the image to be anchored to the right-hand side, like this:

      [data-section-id="5fc3e08408845d092400c576"] .section-background img {
  object-position: 100% 50% !important;
}