I made a top banner which is getting rendered in full width on web page, but when I try to see it in mobile view, the top banner gets shrieked by some percentage.
The html code written is like:
<style>
.top-banner {
width: 100%;
display: block;
text-align: center;
background: #fee768;
color: #555;
font-size: 16px;
padding: 10px 7px;
font-weight: 600;
}
.top-banner:hover {
text-decoration: none;
background: #ffc71f;
color: #846934;
}
</style>
<div>
<a href="https://www.youtube.com/...." target="_blank" class="top-banner">
Need help? Watch this Video
</a>
</div>
This works fine on the web page, but when I view the same page on mobile the top banner doesn't gets rendered in full width.
I tried adding position: fixed !important; to the .top-banner css class, using this the width gets fixed but the bottom content of the page gets shifted upwards, i.e. the bottom content of the webpage gets over the top banner.
Kindly suggest me some way to solve this issue.
If you don’t want other elements to appear above your top-banner, you can use
.top-banner {
z-index:1000
}
The higher the value of the z-index, the more the element appears on top of other elements.
did you tried removing padding and margin on mobile device ?
or
apply these style:
.parent-div{
display:flex;
height:320px;
width:100%;
}
.top-banner {
width:100%;
height:100%;
padding:0px;
margin:auto;
}
try to add important on your code
.top-banner{
width:100%!important;
}
it will force it to be 100% width
I think the reason is because "padding: 10px 7px;" take 7px more space in the left and right of the element.
To fix:
replace
padding: 10px 7px;
with this
padding: 10px 0;
Related
Here's the link structure of the page:
<div>
<h2>Digital Marketing
Video Production
Graphics Design
</h2></div>
And the css:
.button{
text-decoration: none;
color: white;
font-weight: bold;
font-size: 20px;
position: relative;
padding: 10px;
margin: 10px 20px 30px 0 !important;
}
#media screen and (max-width: 800px) {
.button {
display:block;
z-index:above;
}
}
It works as intended on a screen bigger than 800px. However on my mobile device, the last link becomes unclickable as it gets overlapped with the next element on the page.
Is this an issue of CSS position attribute? How can I fix this?
As long as there are no position:absolutes, you can add a margin to the elements. This pushes other elements away from itself, by a given distance.
I would try giving the top and bottom margin a value in % instead of px, then it can work out its own space and you'll avoid overlapping.
Maybe experiment a bit like so:
#media screen and (max-width: 800px) {
.button {
display:block;
margin: 1% auto;
}
And also, I don't know if you need the z-index for something you have on the page already, but you're gonna need to give it an actual value for it to work:
z-index syntax: auto|number|initial|inherit;
I'm creating website and I have a small problem. At the end I set min-width: 1200px. When I change my internet browser to smaller resolution and scrolling horizontally, it does not affect to my menu items! How can I fix it?
#page{
width: 1200px; height:1000px;
}
#page #primaryMenu {
min-width: 1200px;
background-color: #151414;
margin: 0 auto;
padding: 0;
list-style: none;
text-align: center;
font-size: 14px;
width: 100%;
position: fixed;
z-index: 10;
box-shadow: 0 0 5px black;
}
#page #primaryMenu li {
display: inline-block;
margin: 20px 10px;
cursor: pointer;
}
#page #primaryMenu li a {
text-decoration: none;
color: white;
transition: 0.65s;
}
#page #primaryMenu li a:hover {
transition: 0.5s;
color: #d10239;
}
<div id="page">
<ul id="primaryMenu">
<li>STRONA GŁÓWNA</li>
<li>FRYZJERSTWO</li>
<li>KOSMETYKA</li>
<li>SOLARIUM</li>
<li>GALERIA</li>
<li>KONTAKT</li>
</ul>
</div>
EDIT
I don't want to do my website responsive, I want to set it with min-width 1200px; to all devices. Its menu sticks to the top and I don't want to follow vertical scroll.Example: When i change web browser resolution to 200x200 and try to scroll to the right, my menu(list items) stays in the same position.
The problem is when you are giving min-width in pixels it actually taking 1200px of the width.
If you are trying to achieve responsive design then use percentage.
Example: for #page #primarymenu use width as 100% or your desired value (in percentage). Then it will work just fine with all size screens
width:100%;
or
min-width:90%
position: fixed; on #page #primaryMenu : you are asking the browser to display your primary menu at a given x, y offset from the top left corner of the screen, scrolling or not.
Check the documentation about css position.
fixed :
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
If I understand correctly, you want a fixed position on the vertical scroll so that the menu will be sticky to the viewport's top, and normal positioning on the horizontal scroll so the menu viewed by scrolling.
I don't think it can be done in with a css only solution, but check theses questions :
Position element fixed vertically, absolute horizontally
CSS: fixed position on x-axis but not y?
delete min-width: 1200px; and it will work fine
GOT SOLUTION IN JS: jsfiddle.net/vy8rbsv6/1
So on a website I'm making a have a navigation bar, I use this code for it.
<div id="container">
<span>Home</span>
<span>Blackmail</span>
<span style="color: #7CFC00">Keeping Safe</span>
<span>Cyberbullying</span>
<span>About</span>
</div>
However this navigation bar is wider than the others, exact same code (Apart from the colour, the colour shows what page you are on)
I would appreciate it if someone told me why this happens or how it could get fixed!
Website - nibble90.github.io
The page with the wider navigation bar is the keeping safe page!
Your #container menu has a fixed width (83em) and a padding. When your content is longer than the page height, it causes a vertical scroll bar to appear and your fixed width elements can't adjust to accommodate it.
You should set its width to be 100% with a min-width of something like 550px and its sizing to be border-box. This will mean it fits your page much more gracefully on different sized browsers and also auto-adjust to the presence or absence of the vertical scroll bar.
So:
#container{
width:100%;
min-width:500px;
box-sizing:border-box;
}
Replace the #container code by this one and it will works. It's better to use % or px instead of em for container width.
#container {
display: block;
width: 25em;
margin: 0 auto;
padding: 10px 0px;
margin-top: 2em;
text-align: center;
background-color: #333;
width: 100%;
}
The width in your CSS is what is throwing you off. Remove the width and the divs will match in size.
#container {
display: block;
margin: 0 auto;
padding: 10px 0px;
margin-top: 2em;
text-align: center;
background-color: #333;
}
Make sure to remove both because you had width in there twice.
I have two divs that I have have positioned on the left and right sides of the screen (using float and/or absolute positioning, I have found many ways to position them). In the middle I have a single div that keeps the content of my website centered. My problem is that when I have my browser at a small width those outside divs are forced in and mess everything up in the center. When I have my browser at a small width I want a scroll bar to appear so that a user and scroll left or right to see the divs outside the center content. I am using overflow:scroll on the body element but that doesn't do anything. I also need to use
Here is the basic structure
<body>
<div id="navLeft">
<div id="navRight">
<centered content/all of webpage>
</body>
Here is the CSS for the body and side divs
body {
background: #A2F0FA url('images/bg_site.jpg');
background-repeat: repeat-x;
font: 13px Arial, Sans-Serif;
color: #525252;
overflow:scroll;
}
#navLeft {
border: 5px solid #fff;
width:220px;
height: 260px;
float:left;
position:absolute;
top:10%;
left:28%;
opacity:0.85;
}
#navRight {
border: 5px solid #fff;
width:220px;
height: 260px;
float:right;
position:absolute;
top:10%;
left:85%;
opacity:0.85;
}
you can try some negative margin on body's side.
but you won'nt be able to show the left aside on small screen so if content is important, you loose it :
body {margin:0 -220px ; /* width of aside element */.
Test the idea here
Best is to check via javaScript on load and resize width of window & body & if an horizontal scroll is there and its scrollright value.
Then reset the scrollright to a proper value without annoying your visitor.
Strangly enough, my website is rendering fine in Internet Explorer but fails in Mozilla based browsers.
Here is a screenshot:
Does anyone see why "right-panel" does not go all the way to the right? You can see how it is not lined up with the right edge of "top-panel":
#container
{
margin: 0 auto;
width: 750px;
background-color: #ffffff;
}
#top-panel
{
padding-left: 10px;
background-color: #000000;
text-align: left;
width: 100%;
height: 88px;
}
#left-panel
{
padding-top: 10px;
text-align: center;
background-color: #ffffff;
border-right: 1px dashed #000000;
float: left;
width: 250px;
}
#right-panel
{
background-color: #ffffff;
float: right;
width: 449px;
}
.clear
{
clear:both;
line-height:0;
}
If anyone wants to see the actual site it is: Math Relay
When you apply width:100% and use padding-left:10px also, it computes the width first, and then applies the padding, so actually your #top_panel CSS declaration is the problem. Try setting it to a fixed width for that.
it is the padding-left:10px; in the #top-panel
Set that to 0 and you'll see them line up.
Try using FireBug, that's how i found the issue.
The Padding-Left:10px is causing an extra 10 pixels to appear on the right hand side.
Along the lines of the other answers, but hopefully explaining what's happening behind the scenes, too:
The width: 100% on #top-panel refers to the width of the div's content area, excluding borders, padding and margin. Thus, when you specify both width: 100% and padding-left: 10px the width of #top-panel including padding is actually 10px + 750px (the padding plus 100% of the width of #container.)
The best solution in my opinion is to remove width: 100% from #top-panel. This will make the div take up the entire width of the parent element withut overflowing the #container.
The page looks ok in Internet Explorer since IE incorrectly includes padding and border when calculating the width of the div if the page is rendered in quirks mode. More details about this bug can be found here.
It's your #top-panel that's 10px bigger that your #container because of your padding-left: 10px;
Just add 10px to your #container and it will be good.
Remove the width: 100% from #top-panel.