Parabola css questions

  • I have two main styling questions for the Parabola theme. I am new and know a little css and know how to do a search and find code to put in. What I don’t know is what area to edit for changes. This is long, but should be a simple fix for a more knowledgeable person.

    I would like to lessen the area between widgets in the header area. There is room for two, and I have used “search” and a social icon plugin. The search is on the bottom and is sitting right on top of the menu with the bottom border cut off. They stack on top of one another and I could raise the height of the header, but it does not look good. I want to lessen the area between the widgets, but do not know what area to edit.

    The second question is similar to the first but has to do with the footer. There are four horizontal areas to add widgets. When you add more than one widget to the same area it stacks and the background color of the footer shows between the widgets. If you add several, then it looks striped like a zebra…alternating background color of footer and widget background. My footer background is dark green and the widget backgrounds (text, social icons, menu, etc.) are light. Would appreciate any help. Thanks in advance.

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

  • Can you post a link to your site?

    Thread Starter jlh14

    (@jlh14)

    Thanks for responding. The problem is in the header and footer widget area, so it is on most pages. I am still working on the site, so I will send you the link to one of the more completed pages. I think it might be in the li tag used to set up the widget area, but I have no idea how to adjust it. I seem to remember <h1, h2, h3,…> tags have pre-defined spacing, so I am thinking it might be similar but I am just learning WordPress and how to change it. I am using a child theme and the theme allows custom css. The problem is when I look at the theme template, I can’t find the part to edit. Again thanks for taking the time to help.

    Thread Starter jlh14

    (@jlh14)

    That is weird. I did post a link to my site, but it disappeared. Here it is again. https://healthyhabitats.org/test/about-2/

    Try this in your child theme’s stylesheet:

    .widget-container {
	margin-bottom: 0;
}

    This will close up the space between your widgets in the footer, getting rid of that zebra stripe effect, and in the header, it pulls up the search bar a bit so it doesn’t overlap the menu.

    Thread Starter jlh14

    (@jlh14)

    Thanks so much. It worked great. I have spent several hours looking for a solution and trying different things. I do have one more question if you don’t mind. What if I want to stack side widgets and want some space between them? I tried just adding your code to the head and footer tags and nothing happened, so I did exactly as you said and it worked. Now, I assume all my widgets will have no space…even my side ones. Thanks.

    If you use this code instead:

    #header-container .widget-container,
#footer .widget-container {
margin-bottom: 0;
}

    it should apply only to the widgets in the header and the footer. Can you post a link to a page that has sidebar widgets so I can verify, though?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Parabola css questions’ is closed to new replies.