CSS to make find jobs section be full width

  • Resolved Pcosta88

    (@pcosta88)


    9 years, 7 months ago

    Hello,

    I am having some difficulty using CSS to make the find the green search bar and the jobs listed below it take up the screen.

    Page: https://findjobzz.com/map-jobs-2

    I’d want to make it take-up a size similar to the one on the front-page:
    https://findjobzz.com

    I’ve tried max-width and that does not seem to work.

    I believe the CSS element is:
    .container, .jobify_widget_map div.job_listings, .jobify_widget_map div.resumes, .jobify_widget_map_resumes div.job_listings, .jobify_widget_map_resumes div.resumes

    Any assistance would be helpful.
    –Pat

Viewing 4 replies - 1 through 4 (of 4 total)

  • In your custom CSS you have this rule:

    /*Adjusts margins upward for search bar */
@media screen and (min-width: 1000px) {
.entry-content   {
  margin: 10px auto 0;
  width: 850px;
}
}

    Change it so it looks like this:

    /*Adjusts margins upward for search bar */
@media screen and (min-width: 1000px) {
.entry-content   {
  margin: 10px auto 0;
  width: 850px;
}

.page-id-2577 .entry-content   {
  width: 100%;
}
}

    The addition of the second rule in the media query should make the search bar act like the one on the home page.

    Thread Starter Pcosta88

    (@pcosta88)

    Wow that worked! Thank you so much. I do have two follow-up questions that I hope you can address. I understand what you did but I am not sure how you got the correct elements.
    1. How did you figure out the correct page id #? Where did that # come from?
    2. How were you able to see the CSS rules? When I use inspect element I do not see it.

    Thank you very much for your questions. Most people only want a fish, very few people want to learn how to fish.

    1. How did you figure out the correct page id #? Where did that # come from?

    You can either do a view source or inspect the page using Firebug or Chrome DevTools. In either case, you want to look for the <body> element. Correctly constructed themes will call the body_class() function, which adds various class names to the body element, including the page/post ID. Many class names are very helpful when targeting CSS to a particular page. For example, the home page will have a class of home assigned to it. And each page will have a unique number called the page or post ID.

    2. How were you able to see the CSS rules? When I use inspect element I do not see it.

    The first thing I did was to inspect the search bar itself by right-clicking it and doing an inspect element.

    You’ll notice on the left pane of the inspector the code structure. What’s nice about the display is that each element is indented according to how it is “nested” inside its parent element. What I did was look for an element which has a width property assigned to it.

    So the element that was first highlighted when the inspector was opened up was a <div> with a class of search_jobs. It did not have a width property assigned to it, so I clicked on the parent element, a <form> with a class of job_filters. That element also did not have a width property. The next element up, job_listings did not, but the next element, entry-content, does. That’s how I found out what was controlling the width. You may need to scroll the pane on the right, the one listing the CSS rules, down to see all of the rules which affect that element, just to make sure you don’t miss the property that you’re looking for. And sometimes the width property that you find might not be the one that you are actually looking for, it could be a high-level parent element. You just have to play around using your web debugger, i.e., the web debugger will allow you to interactively remove or change CSS property values so you can see how the element gets affected.

    Thread Starter Pcosta88

    (@pcosta88)

    Huh. Wow. I’ve used a hunt and peck method with the dev tools. Just right-click, inspect, and then hunt around.
    I never knew you could inspect anindividual element and it would display the element as it is nested. I see exactly how you arrived at the answer. Thanks so much!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS to make find jobs section be full width’ is closed to new replies.