Ok, fixed. Found my mistake. I forget to escape % and #
when I copied the code from the .css to try it in .cfg !
This now works in the .cfg.
if anyone is interested. This allows the webpage generated by tex4ht
to have fixed width (which I prefer) but if viewed on mobile and small
screens, it will become flexible width to fit the current size.
------------ add this to your .cfg below \begin{document} section ---
\Css{@media only screen and (min-width: 100px) and (max-width: 960px){
body{margin-top: 1em;
margin-bottom: 1em;
width: auto;
max-width: 90\%;
margin-left: auto;
margin-right: auto; padding: 0em;
color: \#444;
font-family: arial, sans-serif;
line-height: 1.3;
font-style: normal;
font-size: 1.0em;
text-align:justify; background: \#FFFFFF;}}}
\Css{@media only screen and (min-width: 960px){
body{margin-top: 1em;
margin-bottom: 1em;
width: 960px;
margin-left: auto;
margin-right: auto; padding: 0em;
color: \#444;
font-family: arial, sans-serif;
line-height: 1.3;
font-style: normal;
font-size: 1.0em;
text-align:justify; background: \#FFFFFF;}}}
-----------------------------------
Now when compiled, the index.css will have this
------------------------ index.css
@media only screen and (min-width: 100px) and (max-width: 960px){
body{margin-top: 1em; margin-bottom: 1em; width: auto; max-width: 90%;
margin-left: auto; margin-right: auto; padding: 0em; color: #444; font-family:
arial, sans-serif; line-height: 1.3; font-style: normal; font-size: 1.0em;
text-align:justify; background: #FFFFFF;}}
@media only screen and (min-width: 960px){ body{margin-top: 1em; margin-bottom:
1em; width: 960px; margin-left: auto; margin-right: auto; padding: 0em; color:
#444; font-family: arial, sans-serif; line-height: 1.3; font-style: normal;
font-size: 1.0em; text-align:justify; background: #FFFFFF;}}
------------------------
Case closed.
THanks,
--Nasser
On 8/29/2023 11:46 PM, Nasser M. Abbasi wrote:
Opps, I copied the code with a missing ending extra } at the end.
Here is the correct code in cfg. It still gives same syntax error
------------------------------------------------------
\Css{@media only screen and (min-width: 100px) and (max-width: 960px) {
body{margin-top: 1em; margin-bottom: 1em; width: auto; max-width: 90%;
margin-left: auto; margin-right: auto; padding: 0em; color: #444;
font-family: arial, sans-serif; line-height: 1.5;
font-style: normal; font-size: 1.0em; text-align:justify; background: #FFFFFF;}
}}
---------------------
Runaway argument?
{@media only screen and (min-width: 100px) and (max-width: 960px) { b\ETC.
! Paragraph ended before \Css was complete.
<to be read again>
\par
I tried escaping it using \@media but that did not work.
Thanks
--Nasser
On 8/29/2023 11:29 PM, Nasser M. Abbasi wrote:
I am trying to add this custom code into my .cfg file, using \Css{...}
that I always used, but it gives syntax error.
The code works fine if I add it manually to the index.css file
after compiling. But I need to put it to my .cfg file so it automatically
go inot each generated .css
The code is below. I got it from this web site
https://www.thatcompany.com/making-fixed-width-website-mobile-friendly
-------------------
@media only screen and (min-width: 100px) and (max-width: 960px) {
body{margin-top: 1em; margin-bottom: 1em;
width: auto; max-width: 90%; margin-left: auto;
margin-right: auto; padding: 0em; color: #444;
font-family: arial, sans-serif; line-height: 1.5;
font-style: normal; font-size: 1.0em;
text-align:justify; background: #FFFFFF;}
------------------------
in the .cfg file for tex4ht, I just added \Css{..} to the above giving
-------------------
\Css{@media only screen and (min-width: 100px) and (max-width: 960px) {
body{margin-top: 1em; margin-bottom: 1em;
width: auto; max-width: 90%; margin-left: auto;
margin-right: auto; padding: 0em; color: #444;
font-family: arial, sans-serif; line-height: 1.5;
font-style: normal; font-size: 1.0em;
text-align:justify; background: #FFFFFF;}
}
-----------------
But when I compile with make4ht, the error is
Runaway argument?
{@media only screen and (min-width: 100px) and (max-width: 960px) { b\ETC.
! Paragraph ended before \Css was complete.
<to be read again>
\par
Is the problem the use of @ in media?
Thank you,
--Nasser
