unakriti

@quelyn

glad to read,, serves the purpose:)

Sharing what worked for me – in case anyone else is after something similar. You can play around with specific values as desired.

	
       /* Align Site Branding in a Row - All Devices */

       /* Fix Site Logo Size */							
       /* Only if you need it */				
					
	.site-logo {
 	max-width: 80px;
	padding: 10px, 0;
		}
									
	/* Fill Header background */
        header {
        background: #fff;
    	       }

	/* Center Site Branding Elements */

	.site-branding {
	display: table;
	width: auto;
        margin: 0 auto;
        border-collapse: collapse;
    		}

	/* Place Site Branding Elements in Single Row  */
	
	.site-branding a.site-logo-link {
    	display: table-cell;
    	padding: 20px 0;
    		}

        /* Align Site Title & Tagline left of Table Container */
									
	.site-branding .site-logo, .site-branding .site-title, .site-branding .site-description {
        float: center;
	text-align: left;
    		}

Kind regards

• This reply was modified 5 years, 5 months ago by unakriti.

Thank you @gemmaevans

You are right. It is tricky! I worked through the code to display site-branding in a single row on desktops and laptops, but not for smartphones.

Where as in the standard way of putting all site branding (logo, site title and description) inside a ‘wider’ image (site description is longish) and then disabling the display of the site title and description – works on smartphones. But on desktops / laptops, the image is shown rather small in size. I am hoping to make it work one way or another without changing the theme.

Appreciate your support.

Kind regards,

Thank you for the support.

Kind regards,

@gemmaevans

Thank you. Yes, I can create the child theme for this. If possible, could you please redirect me / suggest a code snippet that’ll help to achieve this?

Kind regards,

@supernovia

Thank you and yes, that’s an option I’ve used in the past. However, for this site, I do not want site description in the logo. Hence I thought of CSS.

Kind regards,