I am using wkhtmltopdf to simply render an html as a PDF. On my localhost the page looks as expected:
On LocalHost
However, on the browser the formatting is all over the place. What is the issue here?
On hosted website
The HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='responsive.css') }}">
<title>Things Left Said.</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.page-title {
text-align: center;
padding: 20px;
// background-color: #f0f0f0; /* Add a background color for better visibility */
}
h1 {
margin: 0;
}
.editable-label {
font-size: 18px !important; /* Adjust the font size as needed */
}
ul p {
font-size: 24px; /* Adjust the font size as needed */
}
</style>
</head>
<body>
<div class="page-title">
<h1>In honor of {{firstName}} {{lastName}}.</h1>
</div>
<h1>Q & A.</h1>
<ul>
{% for i in range(0, prompt_data|length) %}
<!-- Use a span for the editable label -->
<div class="editable_lable">
<span id="{{i}}" class="editable-label" contenteditable="false" id="editable_label">{{ prompt_data[i][0] }}</span>
</div>
<p id="textbox{{i}}" name="{{i}}">{{prompt_data[i][1]}}</p>
{% endfor %}
</ul>
<h1>Comments.</h1>
{% for i in range(0, comments|length) %}
<div class="comments">
<span id="{{i}}">
{{ comments[i].text }},
{% if comments[i].author is not none and comments[i].author.strip()|length > 0 %}
Author: {{ comments[i].author }},
{% endif %}
Time: {{ comments[i].timestamp.strftime('%Y-%m-%d %H:%M:%S') }}
</span>
</div>
{% endfor %}
<br>
<br>
<h2>Pictures.</h2>
<br>
<br>
<div class="pictures_container">
{% for picture in pictures %}
<div class="picture-item">
<img src="{{ url_for('display_picture', picture_id=picture.id, _external=True) }}" alt="User Picture" class="pdf_picture" style="max-width: 595px; height: auto;">
</div>
{% endfor %}
</div>
</body>
</html>
I was curious if the styles.css was not getting loaded but I did not see an issue with this in the logs.
New contributor
Hats For Homeless is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.