Solved

Header image for WordPress Not Responsive

Posted on 2016-09-17
6
35 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
  • 3
  • 2
6 Comments
 
LVL 18

Expert Comment

by:Steven Harris
Comment Utility
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
Comment Utility
The only thing I have done is make the header disappear. I have not used a plugin or anything like that.
0
 
LVL 28

Accepted Solution

by:
chilternPC earned 500 total points
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 28

Expert Comment

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

Expert Comment

by:chilternPC
Comment Utility
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
Comment Utility
Thank you, worked great!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

744 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now