Hide HTML Header content in mobile view

[dosolutions]

On this site, bfbike.org in the mobile view I have some code in the Header HTML content section, that I need to hide because it over writes other sections.

is there an easy way to hide that?

[scrambler]

If you wish to keep it without the overwrite, give us a link to the page so we can figure out CSS to make it work.

If you actually do not wish to see it on mobile, put the HTML inside a Show_if shortcode with the desktop device (see the add-ons page f0r syntax)

[show_if device=desktop] Your code [/show_if]

 

[dosolutions]

Link to page;

HOME

and

About Us

And in mobile view there seems to be text overwrite issues on most every page.

It would also be nice if the logo shrank automatically so there was more room in the header area for the text.

Thanks

[scrambler]

Your issue comes from the fact that you added a custom CSS rule that fixes the height of the header

#branding {
/* height: 265px; */
}

Remove that rule, and the header will adapt to the content

[scrambler]

Regarding the image, you can make it sacle by adding the rule below with the value you like

#title-tagline a {width:80%;}

But you have some other rules that are screwing up the responsiveness of the layout

you added top: -30px;  to the CSS+ rule of the header HTML BG, and that will cause collision when the browser gets smaller, so we will need to scale the Title and tagline text to prevent that with rules like below (may need some tweaking)

#site-title {font-size: calc(1em + 1vw);}
#site-tagline {font-size: calc(.5em + 1vw);}

You should also change the top margin of the site title from 6% to 4%

 

 

[User]

@dosolutions

For me on a desktop. the last line of your Home Page header html — “transportation, self-sufficiency and overall wellness” — is hidden by your menu .

Regards!

 

[dosolutions]

Thanks for all the suggestions, it looks much better now!

-Daniel

[scrambler]

You did not implement the scaling of the image, wonder if that was because of a problem or because you want to keep it  full size.

 

 

[scrambler]

If you want to try and implement the image scaling and move the header HTML back up for more space optimization, below is a better way.

We set the image to position absolute so the header HTML will automatically move just below the title and tagline without needing the fixed negative top value which is not responsive.

So you would add the following rule for that:

a.custom-logo-link {width: 20%;position: absolute;}

Then change your existing rule below (yellow highlight changes) to remove the negative top, add a top padding, set the left as a % so it scales with the image. remove the invalid align:center (or use text-align:center)

#header-html {
position: relative;
padding-top: 10px; 
width: 95%;
left: 20%;
border: 0px solid #73AD21;
}

And remove the mobile rule below and replace it with the phone one (yellow). That will allow the text to actually move below the image once it is small on phones.

.is-mobile #header-html {margin-top:20px; margin-left:-40px; }

.is-phone #header-html {margin-top:20px;left: 20px;}

[Author]

Posts