Image overflow on bootstrap - html

I have problem with image overflow on bootstrap. Tryed to put on img also on div. Maybe boostrap is overwriting my styles or something. Can anyone give me a suggestion how to fix this issue?
Screenshot
http://www.uzdra.lt/studija/

In your style.css 47 number line.Take a look and add belowcss.Or just
remove margin-bottom:-19px; from #galerija-seperator in your css.It will be worked.
#galerija-seperator {
background-image: url("../img/gallery-seperator.png");
width: 543px;
height: 38px;
overflow: visible;
}

Related

Container of a site with youtube videos goes left - wordpress

I created a site on my blog where I'm putting yt videos. Unfortunately the container of this site goes left and I have no idea why. It doesn't happen to any other site of the blog.
I'm using Virtue theme - https://www.kadencethemes.com/product/virtue-free-theme/
Here's the link to the site I have problem with: http://mlodziez-wks.slask.pl/multimedia/wideo/
I would be more than thankful for help.
This is happening because you added that CSS in your stylesheet
.wideo {
width: 300px;
heignt: 169px;
display: inline-block;
}
Which class is getting called in your "body" tag. And you are forcing your body to stay in 300px width only. Therefore you need to remove it or replace it with
.wideo {
width: 100%;
heignt: 169px;
display: inline-block;
}
it is because you have the CSS class wideo iny our body element, that is adding the following CSS style to it:
width: 300px;
heignt: 169px;
display: inline-block;
You need to remove this class from the body, it is defined outside a CSS file, so it must be added over some theme customisation or similar stuff.
Set your css to
.wideo {
width:100%;
height: 169px;
display: inline-block;
}
This will solve your problem.

HTML & CSS Clickable Background Image

I've searched everywhere to see how to code a background image into a clickable link. I have found a couple of answers to my question but none of them work!!! HELP!
You can try to achieve this using the following CSS trick:
Create an tag as normal and give it an id. You'll need for the custom css.
Clickable Background
Now the custom css for the #clickable-background div:
#clickable-background {
background-image:url(your-image-path);
background-size: 100% 100%;
display:block;
position: relative;
height: 100%;
overflow:hidden;
text-indent:100%;
white-space: nowrap;
}
Don't forget to add
* { margin: 0; padding: 0; } to your css.
Give it a go and see if it does what you want. Don't forget to edit your-image-path.

SE FONT SCALING: stylebot: sidebar cover comments

Mousing over a link in the sidebar works; therefore the sidebar is on top.
Issue description
Commends ending under the sidebar cannot be deleted.
What I've tried
Workaround: using Stylebot to set a user-side CSS rule:
td.comment-text {
width: 500px;
}
Question
My attempts to target have failed. Would someone help me find the right target and rule?
!Additional info
This is not necessarily a stackexchange bug. I use font scaling because it prevents horizontal scrolling, which is very inconvenient for low-vision users.
UPDATE/Resolution
tr td textarea{
width: 475px;
}
Well, the default styles have a rule like this:
.comments {
width: 660px;
}
Maybe try overriding that?
.comments {
width: 500px;
}
Update
The comments textarea specifies a cols attribute that makes it too wide, as well. This should shrink it down.
.comment-form textarea{
width: 475px;
}

Accessibility Issue: Background Images Hiding Child Text

I have the following:
<div class="backgroundImage">
<div>"Hello world!"</div>
</div>
On Android browsers, "Hello world!" will not be read by Talkback/screen readers when selected. However, if I remove the "backgroundImage" class and select it, it will be read. Is there a way I can continue using the background image but with the text of its child nodes readable? Thanks.
Edit:
.backgroundImage {
height: 400px;
width: 400px;
background-image:url('backgroundImage.png');
overflow: hidden;
display: block;
position: relative;
}
I discovered what was wrong. Looking back, another individual added an opacity=0 style to the elements that I was unaware of; removing this solved the issue.

HTML CSS Background-Color

http://paulsfiles.vacau.com/
I'm trying to add a background-color to #maintext but it isn't showing up. The body image seems to be over-riding the #maintext, even though #maintext is more specific.
Here's how I'm trying to lay it out.
The logical order I'm going for is the nav within the header, and the main text before the images. It's a fixed width site as well.
jsFiddle
Didn't you use the same color code #6E6E6E for #maintext and #wrapper?
Works fine for me if I change the color for #maintext. Hope that helps? Otherwise please come back to me :)
In styles.css line:115 you have this:
#maintext {
float: right;
width: 570px;
background-color: #6E6E6E;
padding: 20px;
}
That background-color happens to be the same one as the #wrapper. #maintext is not being overridden, at least not in the link you posted