I'm trying to get a menu with vertical text like on the image bellow
I'm using Wordpress and Divi builder but it needs to be done with some custom CSS.
I tried something like this:
#mobile_menu_slide a {
width: 1em;
font-size: 30px;
letter-spacing: 40px;
word-wrap: break-word;
}
and got this:
now I don't know how to align them like on the first picture.
Anyone know how to fix this?
Thanks in advance :)
Related
I want to be able to move the text "The best products. At the best prices." below keep it simple but everytime i use padding it creates a white box behind it. The only way to fix this is to use position absolute but then it doesnt seem to be responsive when i resize the website
.TextTop{
position: absolute;
padding-top: 40px;
padding-left: 250px;
font-size: 20px;
font-style: arial;
color: darkblue;
}
I want to be able to have a responsive text so when the webpage is changed in size it will move with it. While being able to place my text exactly where it needs to be without interfering with other things on the webpage.
I am new and thankyou very mmuch
I think what you need is
margin: Npx
Instead of
padding: Npx
I've been searching around different posts about how to do line breaks without using HTML. However none of them seems to be able to fix my issue.
I currently have a system setup using the Woocommerce attributes on different products. It looks like this on a
Desktop computer:
I did this by using
ul.custom-attributes li {
display: block;
width: 50%;
padding-left: 50px;
margin-bottom: 5px;
font-size: 20px;
word-wrap: break-word;
}
which is great. However the code doesn't give the same result on mobile as it looks like this:
Phone example:
Any idea how I can force the attributes to do a line break so that it will work on mobile as well.
Thank you very much.
-Daniel
I am trying to align my search button with my text input/search bar but cannot seem to get it to work. Any help would be appreciated!
The site can be seen here: http://www.computerpartsforsale.co.uk/Whois/
Thanks in advance!
#search button {
padding: 24px;
}
Add this style.
I am trying to create a handle for a progress bar on my website. I have the bar there and it works perfectly, but when I try to draw the handle above the progress bar it gets cut off. See the picture attached. The code I have now is:
CSS:
.mejs-controls .mejs-time-rail .mejs-time-handle {
position: absolute;
display: block;
width: 14px;
height: 14px;
margin-top: -5px;
z-index: 1;
background: url(../img/sprite.png) 0 -394px;
}
HTML (Just a picture because I believe that this is a CSS issue):
and this is what it looks like on my page:
Does anyone know what the issues might be? I feel like I am close to solving it, but I could use some help getting there! Thanks.
padding-up the div in which your progress bar is placed will work.
in the class mejs-time-rail , add the following code: padding-top: 5px; in that class. if that doesn't work, try to increase the 5px to 10px
I am currently working on making a photography website for my good friend. I have employed the custom jScrollPane scrollbars from Kelvin Luck over at www.kelvinluck.com.
However, I am having some problems.
The temporary website is hosted here: http://phr-clan.com/nikka/index.php You'll see the lovely scrollbars in action. But, there's a problem. Scroll down all the way to the bottom and you'll see that the text is being cutoff before you can scroll all the way to the bottom. It turns out that there is actually around a full couple paragraphs that aren't being displayed. And the ironic thing is that it displays correctly in IE6 (Isn't it usually the other way around?)
Anyway, what am I doing wrong? Here is my CSS file: http://phr-clan.com/nikka/styles.css
Help is greatly appreciated. I have been pulling my hair wondering why it doesn't work.
Thanks.
Just add
p.text {
text-align: left;
font-family: 'DISCORegular';
font-size: 19px;
padding: 3px;
margin-left: 10px;
margin-right: 10px;
display: block;
}