I have an alignment issue, rather height issue.
Please look at
http://www.hashgurus.com
- in desktop version the header - precisely where the logo is positioned and the menu looks good. On smaller devices/mobiles the logo height becomes too large and becomes clumsy.
I tried changing some parameters to change the height of the div tag but its causing other alignment issues. Any pointers on how to fix this one?
looking at your css you need to add this to the media query:
.header_3 .menu_wrap .logo {
margin-bottom: 0;
}
Related
I created a landing page with Wordpress and I inserted this basic HTML code at the bottom of it :
<p> שיווק דיגיטלי createak כל הזכויות שמורות</p>
I apologize for the foreign language. :-)
I have always used this code, but for some reason now it's unclickable on this specific landing page: http://mickeyberkowitz.com/.
I have no idea why it's happening, any suggestions?
It looks to me like a CSS rule is making the container element for the final section (footer?) fixed, since there is no rule to hide the overflow-y the images show up fine however, the link is actually behind those images.
The CSS rule below fixes the container to 100vh however the content inside the container is much "taller" and so that overflows down. Your link is positioned directly under the parent element of the container and because the height of the offending container is fixed, it doesn't move down.
#media (min-width: 768px)
.elementor-section.elementor-section-height-full {
height: 100vh;
}
If you changed that CSS rule to the one below you'll see an improvement:
#media (min-width: 768px)
.elementor-section.elementor-section-height-full {
min-height: 100vh;
}
You will then notice the large space between the bottom of the "trophy" image and button - this appears to be a "spacer" element probably created by a page-builder plugin. I'd remove this if I were you. In fact, there appears to be another spacer below that as well, these create blank space that you may want to remove - depending on the desired aesthetics of the site.
I checked in your site. This is because, in your code other divs and elements are show over <div id="footer-bottom">
You need to add following code in CSS
#footer-bottom{
z-index:9999;
position:relative
}
This is a quick Fix.
But this may make other things non-clickable. So you need to adjust all your html divs and code properly with CSS.
Please use google chrome or firefox developers tool or inspect your code and fix divs that are overlapping each other.
I'm editing an existing Wordpress theme (created child theme) and I'm having formatting issues. Both on mobile and desktop versions of the website.
My first issue is that the first post loads under the header-logo container sometimes depending on browser size, I notice this happens a lot in mobile devices. The "PROMO" post goes missing.
I've increased both the margin-top & padding-top properties but it doesn't seem to resolve the issue. Do I perhaps have to update the positioning of the container div? If so, what would be the appropriate way? Been reading a few articles and trying a lot of css edits but I feel like I'm just going in circles.
Affected site: http://posteshare.com
Mobile view: http://www.responsinator.com/?url=http%3A%2F%2Fposteshare.com%2F
The other problem I'm encountering is that media embedded on posts are floating on top of my "fixed" header instead of the other way around. I've modified the "position" property to absolute but it seems to break the formatting of the whole page? Been at this for a couple of hours and it's driving me nuts. Any new insight is appreciated. I've ran out of ideas to try.
]3
To make the header appear on top of the other comment, there is a z-index property, as said in the comments by #Milan. Basically, what you have to do is...
#header-container {
z-index: 999;
}
/*all the other elements on page except body*/ {
z-index: /*less than 999*/;
}
With this, the header should appear on top of every element on the page.
If your navigation is 110px height, maybe try adding height + about 20px margin offset to the container like so:
.container {
margin-top: 130px;
}
Add clear: both to .container on grid.css line 3
I have a fixed image placed using this code:
The problem is that in bigger screens the image is placed in the middle of the screen instead of in the left bottom corner (it works fine in 15" screen)
How do I fix this using inline-css style= (attribute) code in HTML?
Okay, you say no CSS but you have inline CSS in your code.
Second, why are you using position: fixed with right: 865px?
The reason the image appears in the middle on larger screens is that you're specifying a direct pixel value. You'll want to either change
right: 865px;
to
left: 0;
Or change the link to float left instead, such as:
float: left;
Either way, why are you putting CSS inline? It is not the recommended or correct usage of CSS. CSS is designed to separate content from styling, so putting it inline defeats the purpose.
If you want it on the left corner of the screen you should be using left:0 instead of right:865px
If you provide a jsfiddle I can help you more.
Edit:
About mobile sites like you asked me, most mobile browser doesn't support it pretty well so we use JavaScript to do the job, here is a bunch of examples and much more info http://bradfrostweb.com/blog/mobile/fixed-position/
Im trying to make a layout that uses the whole screen so I have not set fixed widths on the layout. I'm using percentages.
im working on this http://www.abdhulzaman.co.uk/work/rima
as you can see at the top i have a logo and a header on the top left of the header and also a navigation thats position absolute to the right. now when i minimize the screen.. the nav and the logo header will overlap which is really annoying.
anything to do with position absolute/relative? This may seem very simple.. would appreciate then help! thnx :)
its something similer to http://jsfiddle.net/YFCWm/
Is the size of your navigation dynamic? If not, you could just set a min-width for your header (although it'd be better to set it in a container that wraps your entire site).
If you're just beginning with css and layouts, it can be a good idea to use a grid based framework like twitter bootstrap or blueprint css.
http://twitter.github.com/bootstrap/
http://blueprintcss.org/
Using one of those will make your layout problem trivial.
A quick fix to your problem would be to give the nav element a margin on the left side
margin: 0 0 0 230px;
That will prevent the nav from 'going' further left than 230px from the left edge of the header element.
I am working on my portfolio and I am having an issue with the project description shifting the images on the left downward when the browser resize. A picture of the issue here: click here When you resize the browser the text will shift over and move the images down. I've tried setting min-width but that doesn't help the text nor the image div to make sure it doesn't resize at a certain point.
Here is a sample link to the page itself: [click here][2]
I tried adding min-widths to a image element but that doesn't work either. I do not want to use absolute position as it will overlap on top on resize. Any thoughts or suggestions?
You have an image that is 1052px wide, which is in a UL element that has a margin-left of 1.5em. Your description box is 350px. Basically your #imagewrapper div needs to be equal to or wider than all of these elements.
Right now that's about 1422px. It will change if the effective font size for your UL.imagewrap-pad changes.
That's a pretty wide web site. You probably should make it a bit narrower if you're making it for general viewing, especially with all the tablets etc out there now.
Anyway, the code you want is
#imagewrapper
{
width:1422px;
margin:0 auto;
}
The second line makes it center on the screen.
P.S - get Firebug for Firefox, or use similar tools in chrome. They let you endlessly experiment with styles to find out what works for you.
To solve the problem just set the "width" property in #imagewrapper :
#imagewrapper {
width: 1430px;
}
Have You tried setting up width attr on the parent element to around 1800px?
div#imagewrapper {
width:1800px;
}
It will put a scroll bar at the bottom of Your browser, but if You want to put such a big image beside that text then You do need a lot of space. Just keep in mind that it won't fit in users monitors.
To make it look nice I guess You should apply that attribute to the body tag.