Already a long time ago I started with a new homepage project. I've learnt to build up a homepage on my own, so I'm still in the learning process. Therefore, it might be possible, that I've chosen sometimes not the best way to implement something.
I'd like to have a full width header (and footer) on my webpage. For this reason I created some div tags like this one below:
.header_container_overall-1 {
height: 90px;
width: 1000px;
padding-left: 1000px;
margin-left: -1000px;
padding-right: 1000px;
background-color: #f1f1f1;
}
The problem now is, that a browser (or a mobile device) shows a horizontal scroll bar. I read in a post, that I could use "overflow-x: hidden;". I applied this snippet of code into the "body" class of my css-file. The horizontal scroll bar disappeared, but you can still scroll to the right using the arrow keys on your keyboard.
Unfortunately, I kept programming my website knowing this bug (I thought, that I will fix this later, but I think, this was not the best idea). However, I now came back to this bug and tried to fix it. I found several threads, in which the same problem occured:
kennykee.com/118/div-100-width-without-horizontal-scroll-bar/
stackoverflow.com/questions/18274386/div-overflow-is-hidden-but-still-can-scroll-using-keyboard-right-arrow-key
Then, I tried the following steps:
adding the "overflow-x: hidden;" to several classes (especially the header and footer classes) with the aim to prevent horizontal scrolling. I tried several options and in the end, I got a website, where the header and footer got clipped at the body (for example I got a width of 1000px instead of a full width).
when I tried to use "position: relative;" or "position: fixed;" in different classes, I ended up, that the main page (which is now centered because of margin-left and margin-right set to "auto") was set to the left.
I hope, you understand what I mean. It's hard to describe, even more with my bad English ;-). And as you can see, I sometimes tried stuff without even knowing, what I'm doing. It was more and more "try and error" and I came now to the desicion, that I'm at the end of my html and css knowledge to fix this problem. Maybe you can see the problem right now or maybe you have an idea, what I could try to do.
The website with the described error is available on:
http://www.airlink.ch
The css file is available too:
http://www.airlink.ch/stylesheets/layout.css
If you need any further information, please let me know. And sorry for this long explanation.
Best regards
I did not read the post much further than your CSS. I am sorry but you should not be using hacks like padding 1000 PX and margin 1000px. If you want a full width div, set the HTML and body elements to width: 100%. Then add width 100% to your header/footer div. Make sure to add the meta viewport tag for width = device width. You should do a quick google for some resources regarding device width and responsive design in general.
Hope you can get what you want working!
Related
I have a WordPress site with a really weird issue.
the template on touch screens has a really large vertical margin out of the viewport
this margin doesn't exist when I use responsive browser simulation unless I activate touch simulation then somehow the page grows that large margin.
I've been poking around the inspector trying to find out which element is causing this issue but with no luck!
I even used overflow-x:hidden, max-width:100% and max-width:100vw and nothing seems to work.
here's the link hopefully someone can point out what my eyes are missing
طريقة قياس (طريقة-قياس-قيمة-مسافة-الحدقة-قيمة-ipd-الع)
irrelevant note: the site is in the Arabic language
Ok this may seem a little bit missy but as a quick solution I fixed the problem by adding this code in a media query.
html {
width: 100vw !important;
overflow-x: hidden;
}
Let me know if it works bro.
BS: the elements that are out of proportion is the navbar and the scroll to top as per attached so if you want a clean fix then fix their CSS as they are the root of your problem
I've created a responsive webpage and everything is working fine. I mean the layout for mobile like smartphones and tablets is ok. If I switch to desktop it looks good too except for the footer and that's because there is an empty white space at the end of the webpage if I click on inspect the browser focus the HTML tag.
One thing you have to notice is that the height of this empty space depends on the width of the viewport. Also I'm using sass. I can't share all the code here because it's divided across too many files. If you want to see all the code go here: https://github.com/justanindieguy/podcast-landing-page
And also you can see the webpage in this github personal page: https://justanindieguy.github.io/podcast-landing-page/
Thanks a lot for all your answers. This is driving me nuts, I can't find the solution.
I tried the given solutions from others to make sure none already did the trick on your page, but no success.
I then found the reason you're getting the issue. It's related to the :before of the news section, it's overflowing from the element.
Try adding this CSS :
#news {
overflow: hidden;
}
Now the news section crops the :before element relative to its own dimensions.
I noticed you achieved the layout with skew, but I recommend you to look into clip path generators and create this shape that way.
Add this line to top of your CSS file
* {
padding:0;
margin: 0;
}
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
The menu of the following website https://www.thedegreetracker.com/ has the following issue. The menu seems to be wider than the rest of the page. This is causing a horizontal scroll bar appear at the bottom of my browser's window. When one scrolls over (or maximizes the browser page on a very wide computer screen), it causes other parts of the page, such as the banner and the footer, to disappear when you scroll over.
By way of contrast, the following page does not have the same problem: https://www.thedegreetracker.com/about_us. This second page is how I want the first one to work in terms of the banner and footer resizing correctly, and no horizontal scroll.
As far as I can tell, the HTML and CSS code between the two pages is nearly identical. The differences I have found don't seem to make a difference. I have spent hours trying to figure out what is causing this issue and I am now asking for fresh eyes. I'm using Bootstrap 3 and Laravel, for what it's worth.
I'm hoping this is an easy fix that I'm just missing. You'll probably have more luck using Chrome Dev Tools on the actual web pages to figure this one out, but below is the HTML for both pages. As far as I can tell, the CSS is exactly the same for both pages.
Here's the code from the broken page with the wide menu and horizontal scrolling
view-source:https://www.thedegreetracker.com/login
Here's the code from the page with the menu, banner and footer that work correctly
view-source:https://www.thedegreetracker.com/about_us
The problem is the within the form, not the menu. You have wrongly used the container class (reserved by Bootstrap for setting width of page) inside your form.
Also, your form has a class of .container but you're overwriting the max-width property. This will likely cause responsiveness problems. Try not to touch width, max-width and min-width on classes that a framework uses for setting the width of content and layout, in general. If you must, use an inner-container.
Getting back to your problem, you should have probably used no class at all for your containers inside the form. As a rule of thumb, try to use class names that do not collide with the class names of your framework.
To fix your issue, either remove container from inside your form or, as a general patch for this type of error, add this CSS:
.container .container {
width: initial;
}
First of all, I am sorry for the informal title. I wished to express how I really feel about the issue. I've been cleaning up some things on my site, http://www.gfcf14greendream.com/, and through another question I was directed to this site to debug my html: http://validator.w3.org/ . I've tried it with my site, and have corrected a few errors, but I'm stuck with one, http://validator.w3.org/check?uri=gfcf14greendream.com&charset=%28detect+automatically%29&doctype=Inline&group=0 . As it says:
Line 72, Column 48: The width attribute on the td element is obsolete. Use CSS instead.
<td width=200 style="vertical-align: top;">
But if I try to change this to <td style="vertical-align: top; width: 200;">, the text next to the fading pictures appears to ignore it and resize it self every time it changes, at times becoming too large to be displayed next to the pictures and instead appears below them. Why is there such a tendency to resize the elements, which at least in my case would mess up my layout? Isn't there a way to strictly specify a size and have the browser stick to it (I use chrome), regardless of anything else? I have tried most if not all types of css overflow, yet the text is always displayed on a single line. I've even tried giving the td that holds the text a height, thinking it would realize that with the extra height it would break the text in lines, but it is again resized to get the smallest height possible
If you notice that at the front there is some extra space at the bottom (there is a scroll bar but on an average size screen no need at all for it), it's because I had this problem before with the vertical menu on the left, for which I had to give a bigger height to display completely, again, because making it 100% of its size ruins its display because upon the browser (or whatever tool that does it) loading the site the menu is made smaller and not every button is seen properly. Please if anyone knows how to fix this (I'm really interested in being able to control the sizes of my html elements without browsers or other tools resizing them for me) let me know, thank you in advance for reading
You really shouldn't be using a table in your layout. There is no tabular data to display. Tables are (usually evil).
That said, apply this style:
#desc {width: 200px}
#wrap img {width: 400px;height: 350px;}
and removing the widths and heights on everything should work just fine.
Just an additional critique:
body {
background-attachment: fixed;
background-image: url("http://www.gfcf14greendream.com/images/greentwi.png");
background-size: 100% 100%;
}
and remove your div#background, and img.