I'm creating this site using the dazzling theme and everything seems to work fine except the header.
Have added these code lines to my css and it works fine for the homepage as you can see.
position: fixed;
z-index: 99;
width: 100%;
However, when you visit any other page or blog post, the header is messed up. Can you please provide a solution.
Another problem is, on the home page carousal, I need to add a few more lines to the blog excerpt (Art brings faith to life. This blog....). Can it be done via CSS?
Solved both the problems:
Adding a single line top:0; did the trick. Thanks to the community for helping out.
It seems, the problem was with the default WP excerpt which is 55. Used a single function in the functions.php file which did the trick. Have mentioned it below if it might be a help for others.
/* New excerpt length of 120 words*/
function my_excerpt_length($length) {
return 70;
}
add_filter('excerpt_length', 'my_excerpt_length');
You can change the 70 to anything you like :)
For your first problem The menu having the problem because you set margin-top for your content id.
Keep this as it is if you need to have, make change in you css
style.css line 612
you have to
.navbar.navbar-default
{
leave other css as it is and change only
position: fixed;
top: 0; /* This one you miss*/
and remove margin
}
For second thing you can increase the width or give height to your blog excerpt div.
in flexslider.css at line 98
just add top:0 in this css rule .navbar.navbar-default
.
navbar.navbar-default {
background-color: #fff;
border-bottom: 1px solid #eee;
font-weight: 200;
margin-bottom: 0;
margin-top: -2px;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
Related
I'm using following css formatting to display a loading panel on form submission, and I have stored the gif image in \src\main\resources\static , but the the html div is not picking up the image, it takes all the other css formattings except the image. I have referred the following SOF link, but the mentioned solutions are not working. any one came across similar issue?
How to set background url for css files in thymeleaf?
<style >
#loader {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background: rgba(0,0,0,0.75) url([[#{/loading2.gif}]]) no-repeat center center;
z-index: 10000;
}
</style>
You've set display: none; - therefore an element, including background image, is invisible. Get rid of this property.
Otherwise it looks good.
I have an HTML page which has a CSS file attached. I have a footer class, defining the footer of the different pages. Whenever I add a new class above the footer class it is completely ignored. (The contents of the footer will then move to the top of the page, with no background colour whatsoever). The rest of the CSS does not seem to be affected by this. Whenever I remove the newly added class it will work again. Does anyone know what goes wrong here?
I have a HTML page within an environment that runs on a really old version of IE4 version. I have no choice in my IDE, so I can't upgrade to a newer IE version.
The CSS has grown quite large.
I found that sometimes, moving the footer class up it works again, but then later on, when adding a new class I'll have to move it again.
Footer class (only class that affects the footer):
.footer{
text-align: right;
background-color: #F5F5F5;
position: fixed;
border-top: 2px solid #CCCCCC;
bottom: 0;
left: 0;
right: 0;
padding: 0px;
margin: 0;
WIDTH: 100%;
HEIGHT: 45px;
clear: both;
}
Example of a class I add that breaks the footer class:
button.error:hover {
color: #FFFFFF;
background-color: #E95185;
}
I do not expect the defining of a hover property for a button class to break the footer class.
Also, maybe good to know, the footer does not contain a button with the error class
I am trying to move the ion-tab-button a bit up putting position absolute, top -30px and overflow visible but none of this works. I tried already putting contain none on ion-tabs (a solution for a user here in stack overflow) and didnt work either.
PS1. Even if I try to create a new Ionic 4 project an implement this doesnt work.
PS2. I had success on Ionic 3
Can anyone help me please?
I could solve the issue by simply putting ion-tab-button elements outside ion-tab-bar and adding below css.
ion-tab-button{
position: absolute !important;
bottom: 0.5vh;
z-index: 999;
height: auto;
}
.tab-1 {
left: 5%;
}
.tab-2 {
left: 31%;
}
.tab-3 {
left: 54%;
}
.tab-4 {
left: 79%;
}
Thanks
You can not do it simply by just updating CSS because Ionic provides web component.
Ionic web components base a lot of their styles on the values of CSS4 variables, we can change the values of those variables to modify the internal styling of the web component only.
Please read this article :
https://www.joshmorony.com/shadow-dom-usage-in-ionic-web-components/
you can make changes into below css variables:
-padding-top: -30px;
--padding-bottom: 6px;
--padding-start: 0px;
on Ionic 5 we need to manipulate de shadow DOM...
I put my solution in this post:
https://stackoverflow.com/a/63301631/4320596
I created a starry night animation but was wondering if anyone had a better way to place divs "randomly" with only CSS ??? Also, I'm having difficulty with responsiveness as well. Thank you for your time! just trying to learn.
check the complete code at http://codepen.io/anon/pen/MeeYWO?editors=1100
#star-bl:nth-of-type(5) {
left: -350px;
top: 225px;
}
#star-bl:nth-of-type(6) {
left: 750px;
top: 250px;
}
#star-bl:nth-of-type(7) {
left: -450px;
}
#star-sm:nth-of-type(8) {
left: -225px;
}
#star-sm:nth-of-type(9) {
left: 500px;
}
#star-sm:nth-of-type(10) {
left: -100px;
}
It's not possible in pure CSS at the moment (I'm hoping for calc(rand) to become a thing). The solution you are using is as good as any, you may want to consider using percentages if you want the stars to cluster on a smaller screen type.
Unfortunately that is not possible at the moment in CSS.
However, if you would be willing to change from CSS to LESS, you could give your stars random values. It's possible to insert JavaScript into LESS by wrapping the JavaScript expression with back-ticks as shown in this post.
Here's an example for giving your div #star-bl a random left value from 1 to 100.
#star-bl {
#random-margin: `Math.random() * 100`;
left: #random-margin * 1px;
}
You would still need to give every star a separate block inside the LESS file, but it would give your stars different positions every time you visit the page.
Here's a link to a guide for using LESS.
Not with vanila CSS but you can use a CSS pre-processor such as Less or Sass to generate random numbers for you at compile time.
Here's how you could do it in Sass using its random instance method.
#import compass
body
background: black
.star
width: 10px
height: 10px
position: absolute
font-size: 10px
color: white
#for $i from 1 through 500
.star:nth-child(#{$i})
top: random(1000) + px
left: random(1000) + px
DEMO: http://codepen.io/moob/pen/dXXGdy
This image is a screenshot of the address http://www.rothemcollection.com/engagement-rings/.
The 's' of 'Recommendations' cut by Google Chrome browser. I tried to change the z-index, move it down with the top or margin-top and it still cuts me to the end.
Does anyone have an idea? It could be related to poor I use a special font? If so, what should I do?
Try this css :
#mainSlider h1 span.big {
font-size: 60px;
line-height: 63px;
display: inline-block;
width: 484px;
position: relative;
}
Define your mainSlider Heading position:relative; or define z-index:1;
As like this
#mainSlider h1{
position:relative;
z-index:1;
}
Result is
There is issue, most likely it is related to opacity and css engine rendering, supposely because of some optimization. I would suggest more the header to left by 6 pixels to avoid overlapping of images to it, something like this.
#mainSlider h1 {
left: -6px;
position: relative;
...
There's a few ways to do this - I'll add my view to the mix. Try adding z-index:-1; to the .ring class. This will produce problems if you want to make the images links at some point, but should work in your current setup.
#mainSlider .ring{
position: absolute;
right: 0;
z-index:-1;
}
I reduced the text size by one pixel and problem solved.
Not a suboptimal solution but still works. Unfortunately, the solutions did not help.
Thank you all.