Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a weird problem,
My main page (Only) is showing long empty space under page footer and this happens when I use Google Chrome only.
IE, Firefox working without any problems.
PS :
1 - this weird space disappears from Google Chrome when i turn my homepage to static content page.
2 - I've tried to disable all plugins but still have the same problem
So how to solve this problem.?
Site URL
The problem seems to be with the .screen-reader-text class inside each article which is keeping the items inside the main page flow.
Try updating the css to:
.says, .screen-reader-text {
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
}
Just keep in mind that this will also affect the .says class. If needed, just move .screen-reader-text into its own class.
.says {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}
.screen-reader-text {
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
}
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
Is there a way I can get the NW div to click to google?
html,
body {
height: 100%;
margin: 0;
padding: 0
}
div {
position: fixed;
width: 50%;
height: 50%
}
#NW {
top: 0;
left: 0;
background: orange
}
#NE {
top: 0;
left: 50%;
background: blue
}
#SW {
top: 50%;
left: 0;
background: green
}
#SE {
top: 50%;
left: 50%;
background: red
}
<a href="https://www.google.com">
<div id="NW"></div>
</a>
<a href="https://www.google.com">
<div id="NE"></div>
</a>
<a href="https://www.google.com">
<div id="SE"></div>
</a>
<a href="https://www.google.com">
<div id="SW"></div>
</a>
Thanks
On my systems (Safari on IOS 14; Edge, Chrome, Firefox, IE11 on Windows10) clicking on a rectangle takes me to the google site if I run the code direct.
If I run it through the the Stackoverflow snippet system though it does not, and that is because the snippet system uses an iframe to run the user's code and google doesn't allow itself to be run in an iframe.
It may be useful to have details of the system and browser and any other contextual stuff (like how is the code embedded in other code?) which may cause it not to function in your system.
Meanwhile it could be worth trying to swap the positioning of the anchor element by making that have the fixed position, top, left and dimensions of its child div so that it is forced to take up non-null space itself and see if that removes the problem.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
is there a way to decrease the footer height? I have been playing with the style.css, but did not make it. I would need the footer height as small as possible. Can anyone help?
My client is asking he want full width slider in home page without scroll bar and he is asking footer is also visible in home page like sticky footer without scroll. I tried but its not working. please save me out from this.
website is in wordpress
This is my website url: http://f9interiors.com/
Thanks for your suggestions.
Update following css. you change padding as per your requirement.
.copyright-wrapper {
background-color: rgba(13, 9, 0, 0.4);
position: relative;
padding: 5px 0;
}
.copyright-wrapper .container{
display: inline-block;
}
.copyright-wrapper {
background-color: rgba(13, 9, 0, 0.4);
position: relative;
padding: 0px 0px 20px 0px;
line-height: 15px
}
.copyright-wrapper .container{
display: inline-block;
}
apply that css
section#home_slider {
height: calc(100vh - 65px);
overflow: hidden;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Previously legend-tags had an align property with the values top, bottom, left and right. But in HTML 5 this property is not supported anymore. W3schools advises to use css instead.
But how can you use css to position the legend to the bottom of the fieldset, so that it looks like this:
Edit: Just to clearify: I don't mean that the legend tag is not supported im HTML 5, but the align property does not exist anymore. And I want to position the legend on the bottom of the fieldset.
You need to manually position the legend.
fieldset {
width: 200px;
height: 50px;
position: relative;
top: 50px;
left: 50px;
box-sizing: border-box;
border: solid black 1px;
}
legend {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
padding: 0 5px;
background: white;
}
<fieldset>
<legend>Legend</legend>
Content goes here.
</fieldset>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have an inhouse developed website for doing Home Inspections www.e-ghar.com. But I am facing a issue on its home page. The home page shows an extra blank space on the right side when viewed on a smaller screen. Can any expert of CSS help me in identification of issue?
There is two way to resolve your problem.
quick fix
body {
overflow-x: hidden;
}
Or actual fixes
.tt-wrapper {
overflow: hidden;
}
Try to something like this.
#fwslider {
overflow-x: hidden;
}
Looks like all you need is box-sizing: border-box.
box-sizing: border-box includes the padding and border in the width.
* {
box-sizing: border-box;
}
If you do this, you will have to change your .product1_of_3 to:
.product1_of_3 {
float: left;
width: 29.3333%;
padding: 2%;
margin: 0 2%;
background: #ffffff;
}
Try this.
#fwslider {
overflow: hidden;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
On the bootstrap 'Agency' template found here, on the about section there is a vertical line connecting all of the circle images. I have been looking however I cannot find the style rule or html element which is giving this affect.
Can anyone tell me what is doing this, so I can then modify it (e.g. line length)?
It is a ul element (with the class timeline) styled as follows:
.timeline:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 40px;
width: 2px;
margin-left: -1.5px;
background-color: #f1f1f1;
}
Also, as pointed out by #Vucko:
#media (min-width: 768px)
.timeline:before {
left: 50%;
}
Each point in the timeline is an li (the right hand side lis are just given a different class timeline-inverted).
Nice Question.
On the ul with class="timeline" there is a ::before object created in css that's given a gray background color to create that line.
.timeline:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 40px;
width: 2px;
margin-left: -1.5px;
background-color: #f1f1f1;
}
This is what I would do: create a div that's only 1px in width and however long you want in height, give it a background color, and you will end up with a vertical line.