I am having weird problem on my website when loading it on UC browser. The article texts are cut off from the middle and looks like the div becomes half the size of defined size in only UC browser. I am adding image and code structure. Please help me out to fix this as I care about good user experience. Check out the website article link on UC browser mobile ...
Article link -->
https://elomymelo.com/soundcore%20motion%20plus%20review.html
CSS
.articles-container
{
position: absolute;
left: 0px;
top: 992px;
width: 2358px;
height: 4836px;
overflow: visible;
border: 0px white solid;
background: transparent;
border-radius: 50px;
z-index: -1;
}
.main-article-div
{
position: absolute;
left: 56px;
top: 280px;
width: 2235px;
border: 0px grey solid;
}
.art-text-div
{
position: relative;
font-family: 'Roboto', cus-roboto, sans-serif;
font-size: 90px;
color: rgba(255,255,255,0.60);
padding-left: 45px;
padding-right: 20px;
text-align: left;
padding-top: 280px;
width: 2235px;
border: 0px grey solid;
word-spacing: normal;
line-height: 139px;
}
last two divs are inside articles-container div. All of them are screwed big time ...
Related
I'd like to make a message-alert box in my web app. I created the main style but I have problems on small screen sizes.
Here's the image for the regular 1366x768 computer screen:
And here is for a typical mobile device:
Problems:
The X button has tagled with the message.
The main message wrapper has fixed and wasn't expand when the message came out of the wrapper.
How to fix the two above problems? Do I have to follow another path? I use position: fixed; property-value to keep my message on top.
Here are my HTMl and CSS code:
HTML:
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style=" cursor: pointer;">✕</div>
</div>
CSS:
.top-msg {
width: 100%;
height: 55px;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: right;
padding-top: 17px;
padding-right: 30px;
//border: 1px solid white;
//height: 100%;
width: 3%;
}
.top-msg-inner {
top: 15px;
position: absolute;
display: inline-block;
padding-left: 10px;
width: 80%;
//border: 1px solid white;
}
.top-msg-ico {
min-width: 65px;
height: 100%;
background-color: #fff;
display: inline-block;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
FIDDLE:
https://jsfiddle.net/4oLvyajo/
UPDATE -SOLUTION!-
After some help from LGSon answer I manage to finish all the design, so I accepts his answer but the hole solution is in the fiddle below.
FIDDLE:
https://jsfiddle.net/4oLvyajo/4/
Images:
Here is a start for you
.top-msg {
width: 100%;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: left;
box-sizing: border-box;
padding-top: 17px;
padding-right: 30px;
width: 45px;
}
.top-msg-inner a {
text-decoration: none;
color: RGBA(0, 0, 0, 0.6);
font-weight: bold;
}
.top-msg-inner a:hover {
color: RGBA(0, 0, 0, 0.5);
}
.top-msg-inner {
float: left;
box-sizing: border-box;
padding: 0 10px;
width: calc(100% - 110px);
}
.top-msg-ico {
float: left;
width: 65px;
height: 57px;
background-color: #fff;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style="cursor: pointer;">✕</div>
</div>
replace the width: 80% with margin-right: 40px, and you'll have to play around with the top: 15px as well (at -11 I had it looking right, but you can play around with that)
Here is the updated Fiddle
If you want everything scalable you'll need a completely different approach. First of all, if you place a right floating element under a block element it will float right, but underneath it. You'll need to define the floating close button element first.
Anyway, here's the updated Fiddle
It needs some minor tweaks in the padding and margins, but I think this is very close to what you're looking for
Can anyone please let me know why the following code produces white space between the div "content-main', and the two introduction divs, which sit above the main content?
.header {
width: inherit;
background-color: #58614E;
height: 8em;
position: relative;
z-index: 2;
}
.header-logo {
float: left;
display: inline-block;
}
#header-home-link {
color: white;
font-weight: bold;
margin-left: 3em;
position: relative;
top: 1em;
}
.header a:link {
color: #C5EBF9;
position: relative;
top: 1em;
padding-left: 1em;
}
.introduction-left {
background-color: #EEEEEE;
width: 55%;
padding-bottom: 1em;
padding-right: 1.0em;
padding-top: 1em;
border-right-style: dotted;
border-right-width: 1px;
float: left;
overflow: auto;
}
.introduction-left h2 {
color: #57614E;
padding-left: 13em;
}
.introduction-left p {
color: #626262;
padding-left: 2.0em;
z-index: 2;
}
.introduction-right {
background-color: #EEEEEE;
width: 40%;
float: right;
z-index: 0;
padding-right: 3.3em;
padding-top: 2em;
padding-bottom: 3.7em;
}
.introduction-right h2 {
color: #57614E;
font-style: italic;
position: relative;
left: 3em;
bottom: 0.5em;
margin: 0;
}
.introduction-right p {
padding-left: 1em;
color: #57614E;
}
.content-main {
background-color: #E2E2E2;
border-style: solid;
border-width: 1em;
border-color: white;
width: 100%;
overflow: auto;
}
.content-main h3 {
color: #728063;
font-style: italic;
padding-left: 15em;
}
<div class="header">
</div>
<div class="introduction-left">
<h2>Today's News</h2>
<p>This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website template without
linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the Forums.</p>
</div>
<div class="introduction-right">
<h2>Testimonials</h2>
<p>"You can remove any link to our website from this website template, you're free to use this website template without linking back to us.”
</p>
</div>
<div class="content-main">
<h3>Main Articles.</h3>
</div>
I think because,you use
.content-main{
border-style: solid;
border-width: 1em;
Try to use
.content-main{
background-color: #E2E2E2;
border-style: none;
width: 100%;
overflow:auto;
In your css, I see (last Chrome in Linux)
when I use border-style: none, I get (second div with main-context without space):
It's what you want?
Quick answer - not necessarily right:
Try removing all padding statements in CSS temporarily and see how it looks...
Then add them back in as desired.
The spaces between your elements are causing the white space to appear. Put in some sort of wrapper and give it font-size: 0, then give the divs with text a font-size: initial, or if you care about making it IE compatible give it font-size: 16px or whatever, since font-size: initial doesn't work on IE.
I have a site I'm working on where I have some text that needs to view close to the same size on all browsers. I'm using 1.6em as the font size in the pics below. The problem is that in IE 11 the font appears way larger than in it does in Chrome/FF/Safari. I have tried every font sizing option I can think of, such as; px,vh,vw,vmin,% but, all still render larger in IE 11 than all other browsers. Does anyone know a good work-around for this?
Not sure if it makes a difference but I am using a google font instead of a regular font.
Sample in Chrome (this is how it should look)
Sample in IE 11
My HTML:
<div class="banner-wrap">
<div>
<h1>Where Compassion Lives</h1>
</div>
<img class="banner" src="assets/images/banner_title_home.png">
<img class="greg" src="assets/images/greg-transparent.png">
</div>
MY CSS:
.banner-wrap {
position: relative;
width: 100%;
max-width: 796px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.banner-wrap div {
font-size: 1.6em;
position: absolute;
bottom: 59px;
left: 0px;
width: 100%;
height: auto;
z-index: 40;
font-family: 'Kaushan Script', cursive;
color: #FFF;
letter-spacing: 0.2em;
opacity: 0.9;
text-align: center;
text-shadow: 1px 1px 1px #999;
}
.banner-wrap img.banner {
position: absolute;
bottom: 59px;
left: 0px;
width: 100%;
height: auto;
z-index: 30;
}
.banner-wrap img.greg {
position: absolute;
bottom: 30px;
right: -50px;
width: 19vmin;
max-width:180px;
height: auto;
z-index: 40;
}
Nevermind...figured it out. since I was assigning the font-size using the selector div the user-agent style for the h1 tag was overriding my div font-size style. Changed my font-size style to use the h1 selector and all is good.
I'm working a friend's site: http://www.lauraradniecki.com and I'm trying to get the newsletter bar to stay aligned with the body text, even when the browser is resizing. This works fine, if you're scaling down in size, but if you go up, the size between the text and the subscribe box starts to move away from each other. I can't figure out how to get this fixed
#inside {
margin-left: 11%;
max-width: 530px;
font-size: 100%;
float: left;
}
#insideright {
float: right;
margin-right: 12%;
}
#insideright .formsubmit {
margin: -1px 3px 1px 16px;
}
#subscribe {
background-color: #7EBFC5;
color: #fff;
padding: 30px 30px 40px;
height: 100% !important;
overflow: hidden;
}
Sorry if that's confusing- it's my first time posting here.
I would put the newsletter bar text in a container that is the same size as the body text container. Then set the left and right margins just the same as the body text containers.
Essentially you would make a smaller version of the main content container inside itself.
Assuming from your explanation and code the inside styles should be IN the subscribe id...
#inside {
margin-left: 11%;
max-width: 530px;
font-size: 100%;
left: 0px;
position: absolute;
}
#insideright {
right: 0px;
margin-right: 12%;
position: absolute;
}
#insideright .formsubmit {
background: #ccc;
position: absolute;
right: 0px;
}
#subscribe {
background-color: #7EBFC5;
color: #fff;
padding: 30px 30px 40px;
height: 100% !important;
overflow: hidden;
}
(My DIVs keep on changing position when I resize my page)
So I have seen loads of people with the same problem but they always have a different code so I have a problem getting the answer through their code. Is there anyway to stop them from moving? Maybe because I have the position be from the bottom of the page up or the left...? I have two different DIV's doing this so I might as well add both:
.page {
width: 150px;
height: 50px;
background: orange;
position: absolute;
left: 156px;
top: 43px;
line-height: 50px;
text-align: center;
}
.contact {
background-color: #E6E6E6;
width: 230px;
height: 200px;
position: absolute;
margin-right: 10px;
right: 150px;
top: 200px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 15px;
}