Margins push sidebar to bottom when Wordpress theme installed - wordpress

new to the forum here-
I developed the Wordpress theme that I want to use for my blog- and it looks good on the test site: http://flashandshine.com/eyesofstyletheme/
But when I upload it to my blog: http://eyesofstyle.com/
the nav menu doesn't have the background color, isn't static, and isn't at the top. When you click a post and view a post page, the sidebar is right where I want it. I'm confused as to why it's pushed to the botom on the home blog page.
I was hoping to change this theme around and sell it as a template, but I can't have it moving the sidebars to the bottom! Can anyone help me out with this? I really appreciate it!

If you are looking to sell this, it will need some major overhauling.
Looking at the CSS, you have some very extreme oddities. The main one being that you are using margins to determine the spacing from the sides instead of making a main container which sets the width.
To get it looking sort of alright, change the #blogcontent to show this:
#blogcontent {
margin-right: 0px;
margin-left: 17%;
max-width: 40%;
float: left;
}
Overall though, you will want to change things around a great deal.
This is how you should really want your layout to be using a proper grid layout. Click here.
Its all stuff you pickup along the way though. Hopefully this helps push you in the right direction though.

Related

How to make mobile menu full-width

I cannot figure out, how to make mobile menu full-width. When I click on hamburger menu, it opens up, but it's only like regular dropdown.I tried many ways to change it, but can't figure it out.
Here is the link: https://dev.povoden.cz/
Add style position: static to class "et_pb_menu_inner_container" and "et_pb_column--with-menu"
You can use the following way.
.et_mobile_menu {
position: fixed; /* Instead of absolute */
top: 90px !important; /* Adjust it to set the top value */
}
So I am not sure which version and such you are using. Whilst divi does some great things in terms of making building easier. It means they often make it very difficult to find out why normal CSS doesn't seem to work.
I have a similar issue and I was using the theme builder to build a global header. None of the CSS I tried seemed to work.
I was unable to find where the width was being set and how to overwrite it.
The solution in the end was simple.
When in the theme builder.
New Section (fullwidth)
New Row (full width) - THIS is what actually fixes the problem
Please checkout the attached screen shot
how to adjust the menu

How can I fix my fixed navbar scrolling problem?

I am trying to emulate an "Instagram" style menu for a website for its mobile version. Everything is fine but the problem is that I have a little scrolling issue with the x and y axis in which there are a few pixels more than intended.
I would like to make it 100% fixed so no scrolling is triggered.
I would paste the code but as I am working with a commercial Wordpress theme I find it over-complicated.
The website url is:
https://www.galaventura.com
Thank you very much
Actualization:
I provide two screenshots to support my question. In the first one there is the current state of the navbar. In the second one, the result I seek. Don't pay attention to the unaligned icons. A third image is provided to synthesize my exposure and might make the issue clearer.
The texts in the anchor links (INICIO, NOSOTROS, etc.) breaks the layout. So set font-size to something small, for example 10px:
.ast-header-break-point .main-navigation li {
width: 100%;
font-size: 10px;
}

Gap Below Footer in Wordpress

I have a Wordpress site. I'm using the Blank Slate plugin on top an installed Nirvana theme by Cryout Creations. I'm using it to create my homepage from scratch and will eventually switch to a blank theme altogether.
My issue is that have a 32px gap between my footer and the bottom of the page (I measured it). I have trawled online for the last week and tried every single solution I have seen to remove it (wrapping, negative margins, 100% body height etc. etc.), yet absolutely nothing has been able to remove this gap, and place my footer at the bottom of the page.
Rather than paste my code, I thought I'd ask if anyone is aware of Wordpress itself causing such an issue, or perhaps whether a plugin is capable of doing so? If so, is there a way I can identify the cause?
Link to site: https://nelsontrails.co.nz/8937-2/
Thanks in advance for any help, it would greatly appreciated!
You have margin bottom on article.page. Please copy the below code and paste it to Customizer -> Additional Css to get rid of that space.
article.post, article.page {
margin-bottom: 0px !important;
}
you got margin-bottom: 36px; in your article.post, article.page class in your css please remove it and the white space will be gone

Footer is Overlapping an element, Quick Solution to auto push it down?

I apologize ahead of time, I am not a skilled web designer at all, and I did do some googling before asking this, but it was complicated as most solutions require creating new divs and stuff, I was hoping there is a simple mod or line I could just add to the existing code for the footer to solve this?
Here is the site: http://ratecitident.com/ See how the black footer is overlapping the ratings box, how can I prevent this, to keep the footer at the base on any size screen? it may not show the problem on your screen, but it does on certain sizes, and on phones.
This is how it looks like on my desktop screen: http://gyazo.com/112b627bb056fc0bc6eb48070939d9b7
Thanks
You can simply add this little bit of code to your CSS:
div#content {
margin-bottom: 20px;
}
This is gonna give you more spacing,because you are forcing the footer to bottom of the content div to 20px.
You can always,target a specific screen using media queries,in this case you must target the iPhone screen,here is some good tutorials about the media queries.
css-tricks.com's tutorial
mozilla developer network's tutorial

Can someone help me with some responsive css please?

I'm using Drupal. I have added a sitename and slogan to my kickstart sub theme which is a subtheme of omega. i then added a telephone number through the branding.tpl.php file. When I resize the window, the branding text moves down and behind the rest of the elements on the page - it doesnt push everything else down like i would like it to.
The site I am working on is www.mediamatterstechnology.com, please could someone give me some suggestions on how to fix the responsiveness of this branding section.
What I would like to happen is that when you resize the window, the branding section moves down as it currently does, but pushes everything else down with it, rather than disappearing behind other items on the page.
Thank you so much for any help with this
Your first problem is that <hgroup class="site-name-slogan"> has a specified height of 150px. Changing this to auto allows the text to expand into the space it requires.
This introduces a second problem though, in that the absolutely positioned menu widget interferes with it. How you solve this could have design implications though and there any many possibilities.
One solution is to force a bottom margin on the hgroup when the design is in the mobile version of the layout with the following CSS rule:
body.responsive-layout-mobile hgroup.site-name-slogan { margin-bottom: 40px; }

Resources