Solved

Header image for WordPress Not Responsive

Posted on 2016-09-17
6
70 Views
Last Modified: 2016-09-18
I am having trouble getting the header for my WordPress site to be responsive.

http://www.domgarofalo.com/bjj/

Right now, I just have it set to disappear, but I would like it to shrink with the
window size.

Please help. Thank you.
0
Comment
Question by:dgarofalo
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 18

Expert Comment

by:Steven Harris
ID: 41803237
This expert suggested creating a Gigs project.
This will be depend on your installed theme, or plugin that is being used. Can you give some more details on how you are trying to accomplish this? What steps are you taking? Can you provide any screenshots?
0
 

Author Comment

by:dgarofalo
ID: 41803410
The only thing I have done is make the header disappear. I have not used a plugin or anything like that.
0
 
LVL 29

Accepted Solution

by:
chilternPC earned 500 total points
ID: 41803539
I would remove the  style code that you have that makes it disappear

section.logo-box {
    margin-left: -9999px;
}

Open in new window


and change the following styles in style.css

currently it is:
section.logo-box {
    float: left;
    width: 67.25%;
    margin-top: 0.5em;
}

Open in new window


change it to:

section.logo-box {
    float: left;
    width: 100%;
    margin-top: 0.5em;
}

Open in new window



and change

#title {
    width: 1100px;
}

Open in new window


to:

#title {
    width: 100%;
}

Open in new window


then you need to redesign your header image to be at least 1100px wide as the current image is only 556px wide
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 29

Expert Comment

by:chilternPC
ID: 41803541
you'll also have to adjust all the margins etc... in the media queries to get ride of the white space
0
 
LVL 29

Expert Comment

by:chilternPC
ID: 41803542
to do this without messing with the theme,
 install a plugin called "simply custom CSS"

which is here : https://en-gb.wordpress.org/plugins/simple-custom-css/
then under appearance you get a "custom css"

then add the changes to the styles   in this bit.

otherwise if its a bought them you may lose your changes when you get updates.
0
 

Author Closing Comment

by:dgarofalo
ID: 41804215
Thank you, worked great!
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article shows the steps required to install WordPress on Azure. Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan. WordPress is no exception and requires an App Service Plan and Database to install
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question