Solved

Header image for WordPress Not Responsive

Posted on 2016-09-17
6
42 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
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 28

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 28

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 28

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

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.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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 purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

947 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

18 Experts available now in Live!

Get 1:1 Help Now