Remove white space from the and both

  • Resolved edwinunited

    (@edwinunited)


    8 years, 9 months ago

    Hello,

    I am using the spacious theme and am stuck trying to fix two issues.

    1) I uploaded an image at the start of my content in the about page(https://www.raceyat.co.ke/about/) and would like to remove the space on top and on the sides of it to mirror the images on the home page(https://www.raceyat.co.ke). I have tried out a few of the ideas I came across online, including here, with little success.

    2) I’ve also been trying to change my main menu’s font to Oswald without success. I used firebug to trace down to the exact elements but it still seems I am missing something.
    nav.main-navigation {
    font-family: ‘Oswald’, sans-serif;
    }

    Kindly assist.

    Warmest regards
    Edwin

Viewing 11 replies - 1 through 11 (of 11 total)
    1. Very difficult to do, because the image is in a container (inner-wrap) which has a width that is narrower than the outer container. You could add some CSS to expand inner-wrap, and then some additional CSS to set the margin of the individual elements, but it would be a pain.
    2. Use this selector instead: 
      .main-navigation ul li a {
   font-family: 'Oswald', sans-serif;
}
    Thread Starter edwinunited

    (@edwinunited)

    Thanks mate. The menu fix worked. Still working on the first issue.

    Could you please enclose the image in a <div> and give it a unique ID? That would help with the CSS.

    OK, now add this CSS to the end of your child theme’s style.css file:

    .page-id-126 #main .inner-wrap {
   max-width: none;
   width: 100%;
}

.page-id-126 #main .inner-wrap .entry-content > * {
   max-width: 1218px;
   float: none;
   margin-left: auto;
   margin-right: auto;
}

.page-id-126 #main .inner-wrap #aboutus-img,
.page-id-126 #main .inner-wrap #aboutus-img img {
   width: 100%;
   max-width: none;
}

@media screen and (max-width: 1308px) {
   .page-id-126 #main .inner-wrap .entry-content > * {
      width: 94%;
   }
}

    Thread Starter edwinunited

    (@edwinunited)

    I’ve added the css.
    Unfortunately it is not there yet. I can’t see any noticeable change.

    I don’t see the new rules in your child theme’s style.css file.

    Thread Starter edwinunited

    (@edwinunited)

    Sorry. Some of the changes do not take effect immediately. Sometimes I test with a different browser. Anyway I’ve seen the effect.

    Thread Starter edwinunited

    (@edwinunited)

    Follow up qn: the class .page-id-126 is fixed to that page (about page) correct? There is no scenario where it can become .page-id-127 or something else? Also is there anything I can do about the upper margin?

    Many thanks for all your help.

    Follow up qn: the class .page-id-126 is fixed to that page (about page) correct? There is no scenario where it can become .page-id-127 or something else?

    Yes, that is correct. Whenever you create a post or page, it is assigned a unique ID that will not change. You can see what the ID is by viewing the source (or using a web debugging tool) and looking for the <body> element. The <body> element will have the class ID assigned to it (it’s slightly different for posts & pages). This makes it easy to target CSS for a particular post or page.

    Also is there anything I can do about the upper margin?

    Add this CSS rule:

    .page-id-126 #main {
   padding-top: 0px;
}
    Thread Starter edwinunited

    (@edwinunited)

    Thanks for all your help.
    Much appreciated. I still have much to learn in CSS.

    Thread Starter edwinunited

    (@edwinunited)

    I think I now see the tiny width you referred to earlier. Thanks again.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Remove white space from the and both’ is closed to new replies.