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
Related
Im currently in the process of creating a legal document automation program for the company i work for, however i have run into one issue on possibly one the last step of completing this web app.
I am using the default angular Dashboard layout and set-up, as you can see below.
The document in the dashboard scrolls a little as it is a full document, however it only prints one page worth of the scrollable content. as shown below.
I can show code if any one thinks it will help however in terms of printing using angular and components i haven't found anything yet, so it's all based around window.print() currently with a lot of CSS changes to get it to look right.
I will however show the css code here(its a bit overkill with me trying to figure out how to accomplish this):
#media print{
.documentView{
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin-top: 20px;
margin-bottom: 20px;
width: 100%;
overflow: visible !important;
z-index: 10;
display: block;
width: auto;
height: auto;
overflow: visible;
}}
if anyone has done something like this before or has any tips regarding this, would be much appreciated.
You can try this css property :
https://developer.mozilla.org/fr/docs/Web/CSS/break-inside[break-inside][1]
Newbie here. I'm re-learning web on HTML5 - customizing a blogger site to cut-my-teeth. I've been able to change a lot from the defaults (w3schools is invaluable!) but I'm getting stuck when trying to change formats for specific objects.
Three things I can't figure out as examples (site www.paddlebeforethewave.com)
1) Featured Post (top) - image wrapping text is a default behavior for blog posts that isn't followed for featured post. I was able to change the image/size position as below - but can't figure out how to have text wrap the image.
.FeaturedPost .snippet-thumbnail img {
max-width: 100px;
float: left;
margin: 0px;
padding: 0px;
display: inline;
}
2) Featured post (top) - I want to change background color of only the featuredpost. I've tried to identify and modify it as follows - but no effect.
.Blog .blog-posts .post-outer-container, #page_body .FeaturedPost {
background: $(posts.background.color);
min-height: 40px;
padding: 30px 40px;
width: auto;
}
OR
.FeaturedPost .bgcolor {
background-color: #cfe2f3;
}
OR
many permutations of above
3) Page 2 content - I created a second page (http://www.paddlebeforethewave.com/p/contact.html) and the formatting is lost for vertical padding and location of page labels.
Is my approach flawed? Could you use one fix as example (I want to learn!)
thank you!
Screenshot for (1) and (2)
1) Add the following code to your theme:
.FeaturedPost .snippet-thumbnail,
.FeaturedPost .post-snippet {
display: inline;
}
2) Your approach is fine, if you haven't seen any changes, try to clear your browser cache. Correct classes for featured post are:
.Blog .post-outer-container, #page_body .FeaturedPost {
}
3) I'm not sure I can see the problem. Could you provide a screenshot, please?
EDIT:
Found it! Go to your theme code and add following property to this class:
.item-view .blog-name {
-webkit-flex-flow: column;
flex-flow: column;
}
I see you fixed your problem I did however see an issue on your site. For big screens a white bar appears if the screen is larger than 1800px.
You can fix this by finding this code in your CSS
.sidebar-container
and adding
display:none;
You could test this in your browser by zooming out until the bar appears. Cheers
On this page, the footer does not display correctly in Chrome 17. All the links should be evenly spaced on a single line, but instead it looks like this:
It looks fine in IE and Firefox, does anoyone have a suggestion for how I can fix the problem in Chrome without breaking it in one of those other browsers?
update this id in your css --
ul#footerLinks li {
display: table-cell;
width: 160px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
float: left;
}
Without the display:table-cell also it should work.. so.. its redundant - you can remove it if you want.
Hm... One time when I loaded the page, it looked fine. The next time, it looked like the screenshot you have above. It seems like a Chrome rendering bug. I'd try using display:inline-block instead of table-cell. Alternatively, just render them as inline and center the menu horizontally. The way they are spaced now isn't very rhythmic, in my opinion.
Use float:left; in your anchor tags.
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;
}
http://htmlpocketreference.110mb.com/taggroups.html
For the site above, how would I indent all the code. I don't want it aligned with the paragraph and headings. I want it to be one indent level in. You can check my source if you want and the css is embedded in the html already.
Also, any suggestions on how to improve it?
(Note: I'm not publishing the site, I'm just practicing on getting all the formatting right.
To indent each <code> block, you can use something like:
code{
display: block;
margin: 0 40px;
}
To indent only the first line of each <code> block,
code{
text-indent: 40px;
}
40px is just a suggestion; you can adjust the indentation width to suit your visual needs.
Did you try something like this?
code {
position: relative;
left: 20px;
}
The previous two answers got the methods spot-on:
code
{
display: block;
margin-left: 40px;
font-family: monospace; /* I would add this too, as it makes the code more readable. */
}
Also, as you are displaying code (I hope), try SHJS. Good luck!