I have added a background gradient in the body section of CSS and it works fine in the browser. However, when checking on a mobile device the gradient keeps breaking like shown in the screenshots below. Can you help me? I have no idea why this is happening...
This is my css code:
body {
margin: 0;
font-family: "Poppins", "Karla", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color
Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-color: #FFF;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background: linear-gradient(#212121,#660097);
}
try using this
background: linear-gradient(-90deg, #212121 0%, #660097 100%);
Related
I wrote program using GTK3 with css styling and it works perfect on my KDE.
But problem is that on ubuntu and windows 10 styling only works partially.
I have css file like this:
window {
background-color: white;
}
button {
border: none;
color: white;
padding: 15px 32px;
text-decoration: none;
font-size: 16px;
background-color: #555555;
}
Everything works except changing background of buttons.
It's how I load css:
GtkCssProvider *provider = gtk_css_provider_new ();
gtk_css_provider_load_from_path (provider, "styles.css", NULL);
gtk_style_context_add_provider_for_screen(gdk_screen_get_default(),
GTK_STYLE_PROVIDER(provider),
GTK_STYLE_PROVIDER_PRIORITY_USER);
How can I make it work?
I found solution:
window {
background-color: white;
}
button {
border: none;
padding: 0px;
text-decoration: none;
font-size: 16px;
}
button > label{
padding: 15px 32px;
background-color: #555555;
color: white;
}
You can change by writing css on ~/.config/gtk-3.0/gtk.css.
button.titlebutton.close:backdrop {
background-color: transparent;
}
button.titlebutton.close {
background-color: #theme_selected_bg_color;
}
References:
https://github.com/nana-4/materia-theme/issues/370#issuecomment-481256130
https://asukiaaa.blogspot.com/2022/07/change-color-of-close-button-of-ubuntu2204.html
I'm trying to update a antd component style.
I'm using this: https://pro.ant.design/docs/style#override-the-component-style as reference to try updating a component styling but I can't make it to work.
Here's something I'm trying: https://codesandbox.io/s/cool-wind-kkub0?file=/index.less
I don't understand what I am missing. Any suggestions?
You are using scoped styling which is achieved by ejecting your app or installing npm package for loading styled component styles. For this to work, paste your .less code in your index.css file
index.css
.ant-select-selection {
max-height: 51px;
overflow: auto;
background-color: blue;
}
.ant-select-selection-search-input {
background-color: green;
}
.ant-select-item-option-content {
background-color: orange;
}
.ant-select-item {
position: relative;
display: block;
min-height: 32px;
padding: 5px 12px;
color: red;
font-weight: normal;
font-size: 14px;
line-height: 22px;
cursor: pointer;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
background-color: #9068b0;
}
So this is my problem, I am trying to print some components in React using window.print, my components have defined sizes say 5cm x 5cm, I have hidden all other components in the print page (note that the styling of the whole page is somehow complex to post here), the problem is that my components get resized when on the print page. I have looked a lot but nothing has worked for me.
Note that when I tested the same print in a different page (with no complex styling) it worked fine. So is there any way to pass the styles to the print window or "Override" the styling so that my components get rendered correctly?
Thanks.
EDIT: Here is my CSS. This is working fine in a fresh app so there must be something I used messing things up, I removed all #media print from Bootstrap CSS files but no luck.
I tried to put the code inside as well as outside the #media print but no luck as well.
As far as I know media should render real physical lengths and units, any help would be appreciated.
Thanks again
.print-only {
display: none;
}
#media print {
#page {
margin: 0;
size: a4 !important;
}
body {
margin: 0.5cm !important;
padding: 0;
}
.print-only {
margin-top: 20px;
display: block;
}
.no-print {
width: 100%;
margin: 0px;
display: none;
}
.Container {
position: relative;
display: block;
border: 3px solid black;
width: 6in !important;
height: 2in !important;
margin: 0;
padding: 0;
text-align: start;
}
.labels {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 6pt;
font-style: normal;
font-variant: normal;
height: 13px;
}
.container2 {
height: 39px;
font-size: 8px;
font-weight: 550;
position: absolute;
top: 20px;
right: 1in;
line-height: 13px;
text-align: center;
}
}
Recently, I've encountered with the same issue while designing a print template in React. I was totally wrong in my understanding that whatever styles I write in my CSS files will apply. Then I found there is certain semantics while are required to be followed while designing an HTML print template.
Take a look at this link. This will be very helpful for your design.
These are AngularUI Bootstrap popovers, which are written in Angular instead of jQuery.
I have a popover in a plnkr that is working, but it's positioning is messed up. It is being cut in half by the page.
When I inspect the popover's CSS, I see some code which doesn't make any sense to me. I understand what it's doing, but where are these element.style properties coming from? They seem to be the problem.
element.style {
top: -139px;
left: 112px;
display: block;
}
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
line-break: auto;
}
There isn't even a scroll option available. Is there a way to position a popover so that the entirety of it appears on the page, regardless of where the button is?
In the element where you whant your popover displayed, add the following directive:
popover-append-to-body="true"
Like this:
<small popover="{{form.descripcion}}" popover-trigger="mouseenter" popover-append-to-body="true">
[{{form.status}}]
</small>
The element styling is set in the source of UI Bootstrap in the tooltip section.
Tooltips and popovers are not meant to store that much data which is why they just center it over the element that it is attached to.
EDIT
For this specific example you can add this CSS:
.popover-parent + .popover {
top: 0 !important;
}
.popover-parent + .popover .arrow {
top: 15px !important;
}
The most dynamic way would be to hook into the event that shows the tooltip and calculate the position of the popover then.
I am starting to code for a mobile device (iPhone 5c) and then in my media query sections, I am putting more code that applies to larger sizes: Tablet (768px), Desktop (1024px) and a larger Desktop (1200px).
While I am coding for the mobile section, I am shrinking the width of my window on my own desktop (using google chrome) to the furthest it can be while I am coding. However, when I look at my phone and iOS Simulator with my URL plugged in, it appears as the Tablet version instead. It should not have the background color as "red" on the mobile, ONLY on the Tablet.
Basically: Mobile - not red. Tablet - red
When I plug it in my phone, it comes up red when it is not supposed to be. It looks like the Tablet version.
If anyone could help me I would really appreciate it!
Here is my URL: alyssamroth.com/responsive01.html
And this is my code so far:
html {
background-color: #e9e9e9;
}
body {
font-family: "aktiv-grotesk-std",sans-serif;
margin: 0 auto;
width: 100%;
}
#wrapper {
margin: 0 auto;
overflow: hidden;
}
/*=================== HEADER======================== */
nav {
height: 100px;
background-color: #e54f26;
/*padding: 0 0px 0 0px;*/
}
nav #logo {
margin-left: 20px;
margin-top: 20px;
}
nav #contactIcon {
margin-right: 20px;
margin-top: 35px;
float: right;
}
header #mountains {
width: 100%;
height: 350px;
background-image: url(../img/mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 40px;
margin-top: 0px
}
header h1 {
color: white;
font-size: 2.7em;
margin-left: 55px;
padding-top: 150px;
font-family: "aktiv-grotesk-std", sans-serif;
font-weight: 900;
font-style: normal;
}
header h2 {
padding-top: 2px;
letter-spacing: 15px;
color: #a7a8ad;
font-size: 2.1em;
margin-left: 100px;
font-family: "aktiv-grotesk-std", sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 200px;
}
/* ========== CONTENT ============= */
article h3 {
font-size: 1.8em;
color: #101626;
margin-left: 20px;
margin-bottom: 20px;
font-family: "aktiv-grotesk-std", sans-serif;
font-weight: 200;
font-style: normal;
}
p {
margin-left: 20px;
font-size: 1.2em;
margin-right: 20px;
color: #101626;
line-height: 30px;
font-family: "aktiv-grotesk-std", sans-serif;
font-weight: 400;
font-style: normal;
padding-bottom: 20px
}
aside #ipad {
padding-top: 76px;
}
aside #desktop {
padding-top: 82px;
}
aside #phone {
padding-top: 82px;
}
/* =============== Media Query for Tablets ===============*/
#media only screen and (min-width: 768px) {
body {
background-color: red
}
/* =============== Media Query for Desktops ===============*/
#media only screen and (min-width: 1024px) {
}
/* =============== Media Query for Large Desktops ===============*/
#media only screen and (min-width: 1200px) {
That's what I am seeing, see my scree shots:
Mobile - NOT red
Tablet - IS red