I am inserting simple html pages made with bootstrap 4 into a wordpress project.
I'm using the container class to the divs that contain the contents.
The pages work very well, if it were not for a vertical line that appears to me along the whole page, made up as follows:
On another page:
I tried on the usual page to put a piece of css doing so:
* {
border: none;
}
or
.container {
border: none;
}
But I see that nothing has changed, so I can't imagine what it is.
Here are the page links:
page 1
page 2
It is being added by custom style from Divi here:
#media (min-width: 981px){
#main-content .container:before {
position: absolute;
top: 0;
width: 1px;
height: 100%;
background-color: #e2e2e2;
content: "";
}
}
Related
First of all, I do search and research and try this about a week and has no clue.. so I thought I have earned my right asking somewhat simple, haha!
For some reason, it looks like, width: 210mm; doesn't work as I want. Following screenshot rendered as print mode with F12 tool on chrome.
This is css..
#media screen {
body {
background-color: #eeeeee;
counter-reset: page-number;
}
}
#media print {
#page {
size: A4 portrait;
margin: 0mm;
}
html, body, .page-frame { max-width: 210mm; }
.page-frame {
margin: 0;
}
}
.page-frame
{
overflow: hidden;
position: relative;
page-break-after: always;
background-color: white;
width: 210mm;
height: 297mm;
padding: 30mm 20mm 20mm 20mm;
border: 1px solid #dddddd;
column-count: 2;
column-gap: 5mm;
column-rule-width: 2px;
column-rule-color: var(--secondary);
column-rule-style: solid;
counter-increment: page-number;
margin-top: 1em;
}
/* page layouts */
.page-header { position: relative; column-span: all; margin-top: -17mm; margin-bottom: 2mm; height: 15mm; border-bottom: 2px solid var(--secondary); }
.page-footer { position: relative; column-span: all; height: 10mm; padding-top: 2mm; border-top: 2px solid var(--secondary); text-align: center; margin-top: 2mm; }
.page-header > div, .page-footer > div { position: absolute; width: 100%; height: 100%; }
.page-footer .page-number:before { content: counter(page-number); }
.column-frame { height: 100%; width: 100%; }
In other attempts, including uploaded image, the grey area (body element) remains and surround expecting-paper area and I cannot get rid of this surrounding grey area.
Also, .paper-frame div itself looks smaller than actual a4 size.. and I cannot understand whats happening at this point.
All I want is the .page-frame element properly rendered as A4 size on both screen and print.. and it's hard!
I'm using bootstrap 4 on laravel 7.x and latest version of Chrome browser..
Edit 1 --- Chrome Issue #273306 https://bugs.chromium.org/p/chromium/issues/detail?id=273306
Could it be that problem is the same issue in above link? .. maybe?? or not?.. still I cannot solve this. In my previous work, I used https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css for A4 rendering and it works, but I cannot find whats crucially different so cause the problem.
I've worked with chromes print function in the past and the best way i found to fix these kinds of rendering problems was to brute force it.
Basically change the .page-frame size until it fits.
Although I have to say that your problem seems weird to me since if I remember correctly then the pixel sizes of your .page-frame are inline with what I used.
From the information I can gather from the picture, chrome might be including the margins of .page-frame in to the render. So zero them out forcefully in css.
You could also try to set the "scale" in print options higher to see if that fixes the problem.
For the start, I'd like to introduce might be a rookie problem that there is !important value inside bootstrap.print module.
When you print out, browser using #media print script, yes?
Since I use laravel, hence using webpack, so I generate app.css file that include bootstrap.
During that phase, there are two variables named $print-page-size and $print-body-min-width at the end of node_modules\bootstrap\scss\_variables.css
/* ..(inside node_modules >> bootstrap folder)/_variables.css */
..
// Printing
$print-page-size: a3 !default;
$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
This cause the problem. It's not a bug or any. Well, if you compare the size of actual a4 paper and rendered paper on screen, there might be some difference between those two but it's not a problem. Size is different but result is resemblance.
When you look inside of resource\sass\app.scss file, bootstrap imported after custom scss files like custom or variables.
You can specifiy $print-page-size and $print-body-min-width parameter before importing default bootstrap _print module. When you do that, specified parameter overwrite those value so problem solved. I just set those two value like below.
/* resources/sass/_variables.scss file */
// print
$print-page-size: a4;
$print-body-min-width: auto;
..hey. I sovled!
I’m leveraging Codrops’ slowly aging but still relevant ‘Inline Anchor Styles’ kit. Codrops’ original live demo can be found here. For my site, I’m using the ‘link-arrow’ theme.
I’ve got most of it to work as intended. My problem is that I can’t figure out how to make the longer anchor tagged web links to wrap to the next line.
Here is my reduced test case on CodePen, which also shows the HTML and CSS I am working with. When you are viewing that Pen, if you reduce the size of your browser window, you’ll notice that the very first web link is obscured and extends way over to the right beyond the boundary of the window. What I am trying to do is make the web links wrap to the next line (similar to the way the regular non-anchor tag <li> contents already do).
To further clarify what I am trying to accomplish, you can take a look at this screenshot on imgur. There are 4 red arrows pointing to the anchor tag contents which extend beyond the browser window.
How do you get the content inside the anchor tags to wrap to the next line?
After importing Codrops' HTML, CSS, and JS source code linked to above, these are the only modifications I've made:
body {
background: #f9f9f9;
width: 100%;
font-size: 133%;
margin: auto;
}
.box {
margin-left:-60px;
}
li {
line-height: 150%;
font-size: 1.2em;
padding-bottom: 15px;
}
ol {
margin: 0;
}
ol.dashed {
list-style-type: none;
}
ol.dashed > li {
text-indent: 5px;
}
ol.dashed > li:before {
content: "- ";
text-indent: 5px;
}
.container {
width:100%;
}
What I’ve tried:
I’ve tried adjusting width and max-width values from 100% progressively down to 50% for all the elements in play including the body, ol, li, a elements in addition to the classes in play such as .container and .box. No dice.
I have carefully checked your code on codepen and Codrops's Inline Anchor Styles.
I have found a very simple solution after analyzing your problem, there are two places where the code needs to be adjusted is:
this code code must not include line white-space: nowrap, it should be removed. When removing we need to setup after position of anchor from top: 0
And boom now we changed two snippset as follows:
section a {
position: relative;
display: inline-block;
outline: none;
color: #404d5b;
vertical-align: bottom;
text-decoration: none;
}
.link-arrow a::after {
left: 100%;
z-index: -2;
width: 1em;
background: #34495e url('./arrow_right.svg') no-repeat 50% 50%;
background-size: 60% auto;
text-align: center;
font-family: Arial, sans-serif;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
pointer-events: auto;
top: 0
}
Now Your Anchor tag will not be overflown again.
Based on #Umar_Ahmed's code snippet, I was able to reduce the solution down to this:
section a {
color: black;
text-decoration: none;
white-space: normal;
}
.link-arrow a::after {
pointer-events: auto;
top:0;
}
But I am giving full credit to Umar as the official answer to my question. ;)
Thank you Umar!
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;
}
So here's my problem:
Started working on a website and as the trend goes I went for responsive layout, using bootstrap (12 grid system). So I have to main elements in body which are a heading and an SVG path animation done with LazyLinePainter. So the problem I have is that the heading, is responsive, it stays in the middle no matter the size of the window, yet the animation refuses to do so. I've used same classes on both divs and can't come out with a solution to the problem so that's why I am writing here. I am posting both the html and css:
HTML
http://codepen.io/TresV/pen/bNNZjm.html
CSS
http://codepen.io/TresV/pen/bNNZjm.css
/*=======MAIN CSS=======*/
body {
background:#2ecc71;
}
#pencilandbrackets {
width: 31.5%;
display: block;
margin-top: -155px;
}
#title {
font-family: 'Oswald', sans-serif;
font-size: 4.13em;
position: fixed;
top:40%;
left:50%;
margin: -1.0em 0px 0px -3.2em;
color: #2c3e50;
display: block;
}
.lazy-line svg {
width:300% !important;
}
Here's a life version:
http://thecodehome.tk/new.html
NOTE: Hosting is unreliable so it may not be up at all times.
Thanks in advance for you time and effort!
I would like to use Disqus comments system as a guestbook on a wedding website based on a bootstrap/html5 template.
Since the content on the website is personal, i would like to remove the share links for Facebook, Twitter etc which appear above the comments box and below each individual comment.
Screenshot here, http://imgur.com/pkvUSoF
Is there a way to achieve this by hiding the share elements in CSS ?
I understand the new Disqus uses an iframe, however there is a similar thread for hiding the Disqus footer linked here and the CSS code below does work.
#disqus_thread{
position: relative;
}
#disqus_thread:after{
content: "";
display: block;
height: 55px;
width: 100%;
position: absolute;
bottom: 0px;
background:white;
}
Using the 'inspect element' in Chrome, I am able to hide the share elements using 'display:none'
.nav-secondary>ul>li.share-menu {
float: right;
display: none;
}
and
.post-content footer .share {
position: relative;
display: none;
}
Could anyone help me with the correct code/syntax to add this to my styles.css to hide the Social Sharing buttons.
Thanks !
As described in the article its not possible.
https://help.disqus.com/customer/portal/articles/545277
Reason: Its using iframe to render the comments to prevent XSS
Even though i am not recommending you to do this but there is a way to do so.
Please read terms and conditions before doing any of this.
<div id="disqus_thread"><div>
<style>
.hide-social-discuss {
background: white; // change color according to your site back.
height: 20px;
position: relative;
width: 80%;
top: -60px;
}
<script>
//add this to script
$("#disqus_thread").append("<div class='hide-social-discuss'></div>")
</script>
Same CSS you mentioned, but adjusted to cover share buttons.
Please read disqus terms and conditions before using this.
disqus_thread {
position: relative;
}
#disqus_thread:before {
content: "";
display: block;
height: 20px;
width: 80%;
position: relative;
bottom: -72px;
background: white; //replace with your background colour
}
You won't be able to use featured comments anymore, but hey, it works
looks like this for me ¯_(ツ)_/¯