I've been building my site using the Reverie theme for Wordpress with Foundation 3.2 installed over the included version of Foundation and it's been working great on Safari / Chrome on my Macbook (and iphone), but when I try it on a Windows machine padding becomes an issue from the body tag.
Specifically, the php body_class('hide-extras'); is what's causing the issue. It creates an element style on the body tag of padding-top:45px; and it creates a break between the top-bar nav and my full width header. trying to hard code a !padding-top:0px; yields no result.
If I get rid of it, it creates a problems on every page, and I can't find any documentation on Reverie's / Foundation's body classes.
see: zephyrusdigital.com
That is caused by the foundation.topbar.js
On line 45 :
*Fixed padding-top on body*
if (this.settings.$topbar.parent().hasClass('fixed')) {
$('body').css('padding-top', this.outerHeight(this.settings.$topbar));
You can remove it if you want or work around it.
Related
I built this e-commerce site for a client using ReactJS and deploying via Netlify automatic github deploys. I'm getting very strange results in Firefox and Safari (Big Sur and before). This error appears in the Safari console:
Did not parse stylesheet at 'https://panthercityleather.com/src/index.css' because non CSS MIME types are not allowed in strict mode.
I'm assuming this is what is causing the layout issues? I tried to add type=text/css to all links and style tags but the command npm run build seems to remove these attributes from the tags.
I then locally ran npm run build (as opposed to letting Netlify automatically build), edited the build css to contain the correct MIME types, added autoprefixing to all of the css, and manually deployed this build folder to Netlify. Then I got a different error in regard to the index.css file:
Failed to load resource: the server responded with a status of 404 ()
I am completely lost at this point and would really appreciate any help. The layout issues only seem to arise on desktop Safari and Firefox and the issues are different in each browser. Here is an example from the home page:
Featured items on Chrome. Everything looks correct.
Featured items on Firefox. Note that the spacing between the headings and the images is too tight but the images are cropped correctly.
Featured items on Safari. Note how the images are now cropped wrong but the spacing is correct.
Maybe try adding type="text/css" to every link or style tag.
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style type="text/css" > ... </style>
Turns out I had 2 issues:
I was linking index.css inside of index.html but with a React app this is not necessary. I simply need to import each css file into the react file that references it. This solved the error that I initially posted the question about but did not fix the weird styling behavior on other browsers.
My main issue was that my css was simply not supported on older browser versions. Specifically, aspect-ratio and gap did not have good support. I used the padding-top hack to provide a fallback for aspect-ratio. I simply removed all gap in my css because on Safari v14, the browser apparently supports gap but none of the styles were being applied. I've spent all day scouring the internet so I simply replaced all gap with something like this:
& > * + * {
margin-left: 1rem;
}
This applies a 1rem margin on all but the first element in a flex row. Change to margin-top for a flex column.
I am using Wordpress.
When I switch to RTL language (Arabic) I have a big empty area between the nav-bar and the body on mobile.
This works properly on other browsers, and even the google responsiveness test, but not on chrome (mobile and pc).
You can check attached pictures to see the probelem, however this is the website if you wanna try it BYS : Broken Website
It might be due to a template or a widget that doesn't support RTL causing this. I played with your site's CSS in Chrome dev tools.
Try adding the following CSS:
body {direction: ltr !important;}
body > div.wrapper {direction: rtl !important;}
See if it fixes your problem.
I have a antd table in react but the styles for it differ across platforms (Windows and OSX).
The bottom line that separates two rows is not completely straight on Windows while it is straight on OSX. I've attached a picture for how it appears on Windows machine.
Has anyone faced a similar problem?
Looks like custom height got applied to 3rd and 4th column - Removing that height or setting it to auto might resolve issue.
If possible share css and html snippet.
Are you using same browser in both platforms ? And is it a border of a cell ?
I think you need to apply same CSS to all cells, with a min-width and a max-width, or just a fixed width.
Attention : look at your padding too, it's maybe the problem.
Did you try Normalize.css or reset.css for better cross-browser consistency ?
I once faced some issues in safari/firefox browser but my layout was fine in chrome. So, I used reset.css to get rid of the inconsistencies.
index.css
#import url("./reset.css"); /* path to reset.css */
...
...
/* rest of your code */
(I posted this answer when OP had not stated whether the issue persists when using the same browser or using different browsers across the platforms)
P.S: Either use reset.css or Normalize.css
I am using Rails pdfkit gem to render multi-page pdf files. The rendered pdf file picks up the CSS(SCSS) styling and page breaks as expected. However, when I try to render the same pdf document in production, it seems like the styling only loads some CSS rules and ignores others such as parent container's width and height declarations. Here is my CSS (SCSS) for the parent container element:
.policy_pdf{
font-family: Arial, sans-serif;
.pdf-page{
width:98%;
height:17.1in;
margin:auto;
page-break-after:always;
...
#media screen{
border: 1px dotted red;
}
page-break-after:always;
}
...
}
and PDFKit initializer:
PDFKit.configure do |config|
config.default_options = {
:page_size => 'Legal',
}
end
Here is an example of a pdf rendered in development:
and here is how this same pdf looks in production:
The red line around the doc is a CSS rule I introduced to display how page edges are rendered in production.
Environments
Both, development and production (Digital Ocean Droplet) are using the same version of Ubutnu (16.04).
What have you tried?
At first I thought that some of the CSS classes I am using for pdf-kit such as .page get overwritten by some conflicting rules at compilation, so I tried using unique class names such as .pdf-page instead of .page.
I then tried to see whether it can be related to SCSS compilation. But nested border and background-color declarations within the same stylesheet are getting 'picked-up' and rendered fine. The policy-pdf block inside the compiled application.css looks correct as well.
Disabling smart-shrinking made the PDF look even more "crumbled".
Applying size / width CSS rules (in-line and via external stylesheet) to the html tag as suggested in this post:
Clue:
Both, production and development are running the same version of wkhtmltopdf of (~> 0.12.2). However, running wkhtmltopdf -V, returns wkhtmltopdf 0.12.2.1(with patched qt)
I had similar porblem. In my case it was missing fonts on Ubuntu.
sudo apt-get install ttf-mscorefonts-installer
sudo fc-cache
https://askubuntu.com/questions/651441/how-to-install-arial-font-in-ubuntu
I had such problem a while back too.
I'm not sure, but if I recall correctly, it ended up being different versions of ghost-script.
You can check the version by running gs -v
The production output appears to have larger margins than the dev output.
From your given sample of the relevant css showing your "page config", this might be simply fixed by specifying those margins. This isn't done on the virtual page element .pdf-page, but inside the #page selector.
#page {
margin:10mm 15mm 10mm 15mm;
}
Depending on how this design has being developed and previewed, (print dialog, dev tools media emulation) you may need to adjust those margins to conform to the margins used to preview the work.
This can be done within the Chrome print dialog by setting Destination to 'Save as PDF', expanding 'More settings', selecting 'Customised' within Margins and finally entering the values or directly dragging the margins that now appear over the print preview.
While I'm not familiar with PDFKit, I've developed templates for AthenaPDF, I assume they're all pretty much standard PDF converters using Headless Chrome under the hood. We found it was easier and more flexible to define the #page properties through css rather than attempt to configure it through the AthenaPDF docker service. It only took standard, minimal and none as margin values.
I am trying to edit a WordPress theme's (Spun) CSS and I was wondering if specific posts could be on a separate lines.
I have tried adding display:block; but it did not work.
Any thoughts?
Note : I am using the latest chrome browser.
I just experimented a little with the live editing the preview, add a float:none to the article you want on a seperate line.
The display attribute seems to be correct, it is the float:left which is causing the article elements to stay on the same line.