I have a webpage made by me. At this moment, on different screens, it is looking pretty different.
On my computer the "See More" text is looking like this (which is I want):
FIRST IMAGE:
Whereas on another computer(with different screen size), its looking in this way(which is not I want):
SECOND IMAGE:
In this SECOND IMAGE, the "See More" text is not in a single line for some reasons (on different screen) which is not I want.
Note: I have marked "See More" text with pen so that its easy for the readers to look for the text.
The CSS codes which I am using for the "See More" text are:
.development-text .right-side-bottom {
padding-left: 220px;
padding-right: 0px !important;
font-style: italic;
}
I am wondering what changes I need to make in CSS so that its look same on different screen size computers.
In this class .development-text .right-side-bottom remove padding-left: 220px; and add text-align: right;.This changes you need.
.development-text .right-side-bottom {
font-style: italic;
padding-right: 0 !important;
text-align: right;
}
For your specific problem, this should solve it:
.development-text .right-side-bottom {
text-align: right;
padding-right: 0px !important;
font-style: italic;
}
Yet, this is only a small problem compared to the full set of problems that you will encounter in the process of coding a responsive page. I really recommend you take a course in responsive design, such as Learn Responsive Design
Related
I have a site which uses CSS to create drop caps at the start of articles. This works as expected in most browsers, but Firefox (Linux and Android) displays it incorrectly, but only in certain instances.
On most pages, I get correct output, like this (the blue dashed lines at the side are the edges of the container, shown for illustrative purposes):
However, for a handful of pages, Firefox renders it thus:
Notice that there's a large gap to the right of the drop cap, and the text overflows the box by a corresponding amount.
Here's the relevant SASS:
article .first-paragraph {
text-indent: 0;
&::first-letter {
font-size: 300%;
font-weight:normal;
display: block;
float: left;
margin-right: 0.25em;
padding: 0.5em 0.3em 0.3em 0.5em;
background: $primary-color;
color: $background-color;
border-radius: 50em 5em 5em 5em;
font-family: 'Fredericka the Great', $base-font-family;
}
&::first-line {
font-variant: small-caps;
}
}
I have been unable to discover any difference which can account for this behavior. The articles are written in Kramdown-flavored Markdown and processed by Jekyll. The two articles are absolutely identical in Markdown except for the words themselves. And yet, the bug always happens on the same pages. I've tried setting the first few characters to be the same, but to no avail. I've also made the previous content follow the same structure, where there were differences in structure, but it didn't change anything.
Any ideas what might be wrong, or what I may have forgotten to test?
EDIT
I've narrowed the offending CSS down to the following rules:
article .first-paragraph::first-letter {
display: block;
float: left;
margin-right: 0.25em;
padding: 0.5em 0.3em 0.3em 0.5em;
}
If I turn them all off, the problem goes away. If I turn any one of them on, or any combination, the problem is back, except that display: block causes no issues on its own.
If you want to test it further, here's an example page with the bug (at least until I manage to fix it.
The more I think about it, the more I think that there must be something else on the affected pages beyond what I've posted here, which is causing the issue on Firefox on Linux, Windows, and Android. But for the life of me, I can't figure out what that something else is.
I have a webpage made by me. At this moment, on different screens, it is looking pretty different.
On my computer the "Sales" text is looking like this (which is I want):
FIRST IMAGE:
Whereas on another computer(with different screen size), its looking in this way(which is not I want):
SECOND IMAGE:
In this SECOND IMAGE, the sales text is going far left for some reasons (on different screen) which is not I want. I want it to be on the top of hands image as depicted in the FIRST IMAGE.
The CSS codes which I am using for the sales text are:
.sales .text1 {
padding-left: 450px;
color: #0275d8;
font-size: 1.3rem;
font-weight: bold;
font-style: italic;
padding-bottom: 20px;
}
I am wondering what changes I need to make in CSS so that its look same on different screen size computers.
You should use relative measurements like percentage,etc to avoid this, additional you can use media queries to have a different behavior depending of many factors like the screen width
Awesome question, you want to make your webpage responsive.
check out that link, I believe it has exactly what you are looking for.
https://www.w3schools.com/css/css_rwd_intro.asp
In your CSS, I have changed padding-left: 450px to 0 value and added text-align: right so that See More link will not be cut-off.
.sales .text1 {
padding-left: 0;
color: #0275d8;
font-size: 1.3rem;
font-weight: bold;
font-style: italic;
padding-bottom: 20px;
text-align: right;
}
Actually whenever there are two lines in title, it gets very close, which makes it hard to read. So can anyone tell custom CSS that I add for space in between H1 tag in Tittle?
You can change your H1 tag in your css to have a larger line height
h1 { line-height: 20px; }
Using line-height
.page-title {
line-height: 40px;
margin-bottom: 20px;
}
<h1 class="page-title">Very Very Very Very Very Long Long Long Long Page Title</h1>
Adjusting the line height should fix that
h1 {
line-height: 1.4;
}
Try to work with padding. Padding basically let's you put in some extra pixels in the wanted direction. So for instance: for your title to stay in position on your screen, add 5 px of padding-bottom.
looks like this
padding-bottom: 5px;
...or whatever amount of space you want in there but this is basically how you do it.
As per your template Link you provide at comment, You are talking about this line,
"Use Of Computer Increases To Keep The Record"
Solution:
First open style.css, then got to line 2535 or find,
article.post.hentry h1.entry-title, article.post.hentry h2.entry-title {
line-height: 26px;
margin-bottom: 10px;
Increase line-height property 26 to 36 line-height: 36px;.(increase as it looks goods to you)
This was before
This is after
It's worked for me, Let's take another try,
Try using this line-height: 36px!important;
I am building a site, and hanged on a problem.
I positioned the menu bar perfectly, but for some reason on bigger display resolutions or android devices the Contact Us menu item tends to jump to a new line.
The link of the web page is http://uk.delux.lv Just try to zoom it and see what happens.
This is the css for menu:
#topmenu_wrap {
margin:auto;
overflow: auto;
background: #fff;
}
#topmenu {
background-color: #fff;
width:966px;
margin:auto;
padding-left: 0px;
font-family: 'Droid Sans', sans-serif; font-weight: 400;
font-size: 13px;
color: #969696;
}
What I suggest is to set the padding of the a tags in the ul>li to padding: 16px 15px. Set the total width of the topnav>ul with class menu to width: 966px.
You are not going to be able to control the width of the text on the topnav unless you make them images. That will allow the text to remain the same no matter how far the user zooms or the size they set the text in their browser.
I thought I found somewhere a while ago a way to set the text as static so when someone zoomed nothing happened but I can't find it.
As far as making it expand I wouldn't do that. You aren't going to be able to control every persons browser and the way it looks. Where I work we only check a normal view in the 5 major browsers and if they change something on their end then oh well.
When using a <h1> tag for example, is there a reusable formula for getting the outer border of that element to PERFECTLY follow edges of the type? In theory I would expect this to work:
h1{
display: block;
font-family: sans-serif;
font-size: 38px;
line-height: 100%;
height: 38px;
}
So the line height is set to be the same as the absolute text height, which is also the height of the block. However this never works. Here is an example of what does work for sans-serif 38px;
h1{
display: block;
font-family: sans-serif;
font-size: 38px;
line-height: 28px;
height: 35px;
}
Here is another working example.
h1{
display: block;
font-family: sans-serif;
font-size: 25px;
line-height: 19px;
height: 22px;
}
This is all well and good, but it has to be calculated manually in firebug each time. There is no formula I can find to do this.
Additionally, it would be nice if any solution also worked with #font-face fonts, but I understand there is more to take into account there. (like the top alignment that only occurs on Mac).
Does such a formula exist? Is it possible to write one? How about some LESS CSS fancyness?
I agree with #ToddBFisher in the comment, and at this point for me it's more of an usability issue. Consider people can also vary the font sizes in their browsers... in that case using ems would be better. But browsers also render font differently, so something that looks amazing in a mac will look pixelated in a pc. If you want something to look perfect, use images.
Check this other question for more info on line-height: How to achieve proper CSS line-height consistency
Or this one: CSS Line-Height Guide
You can also check the usability stack for discussions about these things: https://ux.stackexchange.com/ There are pretty amazing posts in there.