Columns vs inline rows
-
I am trying to replicate the header of an existing website for my client using FSE on the Twenty Twenty Three theme. A new outing for me. The header uses a logo to the left and then the site tageline and a heading underneath on the right. I’ve tried using columns and rows with different results that leave me with problems. The link currently has both on for demonstration.
The upper is a row with the image to the left and then a Group next to it containing the Site Tagline and heading underneath. Using this option, when the screen is resized causes the logo to resize to a tiny thing.
The lower is two columns – logo left and Tagline and heading on the right. In this one at around tablet size, the image starts to look squeezed horizontally, before righting itself. Odd!
My main problems is that although I have used CSS to center the elements on mobile devices, the logo stays stubbornly on the left in the columns and in the row takes no notice at all.
My CSS currently is:
@media only screen and (max-width: 600px) {
.headcolumns, .headercolumn, .headerlogo, .headertitle {
text-align: center;
}Can anyone please help me understand why I’m seeing these behaviours and what I can do differently?
Thank you
The page I need help with: [log in to see the link]
-
Hey @nfwro there’s definitely a few factors at play here…
The upper is a row with the image to the left and then a Group next to it containing the Site Tagline and heading underneath. Using this option, when the screen is resized causes the logo to resize to a tiny thing.
This particular case is as expected – with a ‘row’ block it will try and continue resizing unless the setting to make items wrap is turned on.
The lower is two columns – logo left and Tagline and heading on the right. In this one at around tablet size, the image starts to look squeezed horizontally, before righting itself. Odd!
This is a little bit of an odd one – I can see the image has an inline style applied which is making it scale disproportionately. When you edit the image – can you tell me if the aspect ratio (in the settings in the sidebar) is set to Square?
My main problems is that although I have used CSS to center the elements on mobile devices, the logo stays stubbornly on the left in the columns and in the row takes no notice at all.
To get that logo to center align on smaller screens – you’d need CSS something like this…
@media only screen and (max-width: 600px){ .headercolumn .wp-block-image { margin: 0 auto !important; float: none !important; } }Could you please try that out and see if it helps?
- The topic ‘Columns vs inline rows’ is closed to new replies.
