thaitandem

Thanks tuanphan for getting back. Yes, I have changed what looks like a Text Block to an Image Block. I gave up trying to figure out how to use CSS to vertically align the text content block adjacent to the image in this section--way over my head I guess. I came up with, and applied the solution described below. But if you or someone can offer some CSS for vertically center text content in one block (column) adjacent to an image block (column), that would be far simpler than what follows. I changed the Text Block containing the title and subtitle to a Poster Image Block. This allowed me to place my title and subtitle text into the fields provided for this purpose by Poster Images--then let the Squarespace Layout Engine do as it pleased and provide the vertical centering of my title and subtitle. But first I had to create a single-color image file matching my desired background color for the text, and size this image to match the length and width as my actual image the text refers to. Used this as the Poster Image behind the title and subtile. I also had to eliminate the default opacity Squarespace applied to this single-color Poster Image per the following: div.image-overlay {background: transparent !important;} The reason for all these hoops is that I wanted my image and text blocks to each occupy 50% of the page width and be full-bleed within their respective halves of the section. The Image Card option only allows about 40-45% width for the image (55-60% for the text) and is not full-bleed. Other default layouts that offered vertical title/subtitle centering all broke when I adjusted the section padding to achieve full-bleed for the adjacent image block.

A much simpler version of the above is now delivering consistent results for me. Maybe it will work for others? 1) Add new Blank Section between Header and Image Section. 2) Set this new Section's Height to its lowest value: 10. 3) Capture Section ID. 4) Insert the code below with the Section ID into the page's Advanced Code Injection. [data-section-id="Your Section ID"]>.content-wrapper { height: 0 !important; padding: 0 !important; }

Thanks so much tuanphan. Would you be so kind again, and share with me how I could vertically center-align the text block? I've been struggling with that as well.

Tried approaches above and elsewhere on the forum, but have yet to find the right formula. Wishing to reverse column order of two blocks on mobile of the top visible section on this this page. ( section[data-section-id="5ef177e3cc65d8443616c06a"] ) ( #block-5ef177e4d15ac858b69f565a ) & ( #block-yui_3_17_2_1_1592882387887_7816 ) On mobile would like the image block on the right to display first--above the text block.

In case it may be of use to others, here is what I, a novice, is now doing to remedy the problem—gaining the full height of the image below the Header, with no extra space between the Header and Image Section below. It’s a modification of Zara’s approach with some modified CSS @tuanphan offered from another thread. 1) Place a new Image Section between the Header and current Image Section. (I’ve tried with a Blank Section, but did not achieve consistent results—for some reason the Image Section worked every time.) 2) Set Section Height to minimum-10. 3) Delete the default background image. 4) Set background color of the new Image Section to match the background of the Header — or use CSS as indicated below. 5) Delete the spacer that may show up in the center of the section. 6) Obtain this new Section’s section-id and its empty Text block-id. 7) Inject the following CSS into the page’s advanced settings, incorporating the appropriate section and block ids from step 7 above. <style> [data-section-id=“XXXXX"] { min-height: 1vh !important; } [data-section-id=“XXXXX"] .content-wrapper { padding-top: 0px !important; padding-bottom: 0px !important; background-color: /*your color*/ !important; /*optional to match Header background if not set in step 5 above*/ } #block-XXXXX { padding: 0px !important; font-size: 1px !important; } </style>

In case others are still having problems, to get the above code to work for me in 7.1 on the blog side-by-side page, I added: {display:block;} h1.blog-title a { line-height: 20px; display: block; }

Got a quick response back from Squarespace... Hi there, Greetings from Portland, Oregon. Thanks for writing in to Squarespace Customer Support! I've gone ahead and read through for article you linked as well as checked out your site and I can see what you mean. At this point in time the behavior that you're seeing is expected and we mention that a header with a solid background color will cover some of your image here:https://support.squarespace.com/hc/en-us/articles/360000667707#toc-header-backgroundIn the meantime what I can do is submit the option to not have the header overlap some of the image as a feature request to our Development Team for you. We can't guarantee that each suggestion will be implemented, but each one is reviewed by the team and we do appreciate the feedback.Moving on, if you don't want to have your solid background header overlap your first image you might consider using custom code to resolve this. That being said, be aware that due to their complex nature, we're unable to offer assistance or troubleshooting for code modifications or additions. These types of modifications may cause unwanted results when interacting with our platform, templates, or updates we release. This guide is an excellent starting point: https://support.squarespace.com/hc/en-us/articles/205815928If you're looking for an option that won't require code, I'd recommend giving the work around that NovaMae mentioned which includes adding a blank section with no content above you full bleed image and setting it to the lowest height possible. From there you can add a background color that matches your header and that can help push that content down so it's revealed in full. I hope this information helps!Cheers, Katherine S.

I've got the same problem using 7.1. Even trying a brand new site demonstrated this behavior. I'm using CSS to add a top margin to that Section ID to account for the space absorbed by the header. A far from perfect hack as different screen resolutions render the height of the header differently, so need to target them specifically. Those in the know must have far more elegant solutions to offer, to what must be a known problem within Squarespace?