Side bar in website/top banner in mobile and tablet

Greetings! The side panel/sidebar column is ideal for what you have planned, but let’s get this solved for you.

My guess is that when viewing in a mobile device, such as a phone or tablet, the full image is getting cut off–or rather too much is getting cut off. Is this the the issue?

If so, I have an easy fix–plus a possible theme update to give the end-user the ability to adjust the image header height from the customizer.

Best Regards,
Andre

My guess is that when viewing in a mobile device, such as a phone or tablet, the full image is getting cut off–or rather too much is getting cut off. Is this the the issue?

Yes! Totally forgot I could give you a link to the images: https://drive.google.com/drive/folders/12xZO2EjEHFQf_LIXKJt_xJtdrSmiy4th?usp=sharing

If so, I have an easy fix–plus a possible theme update to give the end-user the ability to adjust the image header height from the customizer.

Yes please!

Andre, I may in fact love you! Thank you!

No link to the images necessary for this one ??

Now, let’s dig into this… The side column becomes the header in mobile view. Both load the photo(s) as a background, which gives more flexibility for the layout (how it looks). Both views have a “height” applied to them. The side column has a 100% height of the browser window; the mobile view does not–this is where your image is partially hidden.

The one possible solution is to give you something right now (unless you want to wait for the theme update–I will do this for tomorrow if not today)…

In the Additional CSS tab of the customizer, copy and paste this code into it and see if this helps:

.sidecolumn-inner {
    display: flex;
    height: 70vh;
}

If this works for you, I will more likely make this as a theme option in the customizer. This will give the person the choice of how much of the mobile header view is seen (the photo) by changing the height of the header.

NOTE: The 70vh that you see there means the header (in mobile view) will be 70% of the browser window. You can change that to your preference.

Best Regards,
Andre

You beauty! That’s works a treat! I just now have to decide on which is the best pic… It goes live tomorrow! Thank you.

• This reply was modified 1 year, 8 months ago by lizafrank.

You are very welcome ??

I will make this as a setting in the theme’s customizer on the next update (today or tomorrow).