Responsive Header and Footer Heights on Tablets

Hey @wardencenter

Not entirely sure what you’re referring to, but each header and footer row has height controls inside the customiser, that also can be changed on a per device basis — https://ibb.co/FsXxd6k

If these controls don’t go past a point, it means that you have some paddings or margins on the other elements, so you might want to check them out in particular, by clicking on each of them.

Hope this helps.

Thanks.

Thanks, Eduard – once again.

Yes, I have tried to correct with the header and footer row settings as shown in your screen shot. I see no change on my mini ipad, or full-size ipad after using these controls. Again – the header and footer look great, and need no adjustment, on smaller cell/mobile screens.

In the header, it’s the row containing the logo and the contact button (the “button” widget in the theme customizer) that is the problem. When I edit the page with a CSS editor, I can verify that my logo is cropped to the very edge (no white space around it), and has zero padding and zero margins set.

I finessed the footer with some rearranging, and by making the middle row not visible on tablet/mobile so that it looks acceptable now on tablet/mobile. But, obviously, we don’t want to hide the header row that contains our logo.

I was able to figure out @media and added this to the Additional CSS – but I’d really rather not have yet more lines of Additional CSS to keep up with:

/* HEADER and FOOTER possible RESPONSIVE FIX */
@media all and (max-width: 1050px) {
#header div img{
	display:inline-block;
	height:50px;
}
#header > div > div > .ct-container-fluid{
	min-height:50px;
	height:50px;
}
/* button */
#header .ct-header-cta a{
	height:30px;
	font-size:14px;
	margin-top:-180px !important;
}
/* FOOTER */
#block-41 h2{
	font-family:'Open Sans', arial;
}
/* bottom row middle */
.ct-footer #block-45 span:nth-child(1){
	font-family:'Open Sans', arial;
}
.ct-footer div span:nth-child(3){
	font-family:'Open Sans', arial;
}
/* Copyright Paragraph */
.ct-footer div p{
	font-family:'Open Sans', arial;
}
}

Here’s the url of the test site, if you’d like to take a look – though it might be removed by tomorrow night if I’m lucky:
dewingscenter.org/clonewpo/

• This reply was modified 3 years ago by wardencenter.

Hey @wardencenter

Ok, let’s take it from the top, because what you’re trying to achieve isn’t really possible out of the box. Let me try to explain.

First, Blocksy uses the desktop view for desktops and landscape tablets. This is in concordance with the newly developed web guidelines that tablets should show the desktop view — something that Apple made standard a few years ago and others followed suit.

The tablet portrait and mobile phone views use the mobile view for the site. That’s because a portrait tablet wouldn’t have enough space to fit all items comfortably on the screen, and phones are portrait by nature.

What you’re trying to modify actually, is the desktop view that’s shown on your “tablet view”. I know it sounds a little bit intricate, but that’s how things are supposed to work like.

Your best bet in this case would be to continue using CSS for these kinds of adjustments. But, we’re also thinking of implementing customisable breakpoints in an upcoming update. The feature is still in the planning stage though, as we have to figure out how to make this work great with the tons of setups out there.

Hope this clears things up.
Thanks.