1st Peter 3:15, “But sanctify the Lord God in your hearts: and be ready always to give an answer to every man that asketh you a reason of the hope that is in you with meekness and fear.”
Right to the point, copy and paste the following CSS code anywhere between
the <head></head> tags of your webpage, and then it will be Mobile
Responsive...
<head>
<!--BEGIN CSS code to set viewpoint, telling it not to shrink the webpage-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--END CSS code to set viewpoint-->
<!--BEGIN CSS code to resize all images to fit screen, but not allow image to be bigger than original size-->
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<!--END CSS code to resize all images to fit screen--></head>
You don't need to copy the above <head></head> tags, I just used them to show you exactly where to paste the CSS code on your webpage. Anybody can do this. I am still using Microsoft FrontPage 2003, but you can use any webpage creative software.
By the way, I have already made this webpage Mobile Responsive, so if you're not already on a mobile device, you can see what it looks like. A helpful tool that I often use is called a Mobile Device Emulator or Simulator, which is a free extension tool for Chrome browser users. It allows you to view your laptop or desktop computer screen as if it were a mobile device. It is accurate and helpful.
Also, I have the license-free version of Microsoft Expression Web 4 (with CSS capabilities) if you freely want it, just email me at kingjamesbible77 AT gmail DOT com and let me know you want it. The .exe file is 101 MB and I will send it to you using either Google Drive or WeTransfer. I downloaded the software from Microsoft when they were giving it away for free (which to my understanding is no longer available). Microsoft no longer offers any support for the program though. It is very similar to FrontPage, but better with more features. I have installed it on my own laptop, so the file is safe. I am very thankful to Microsoft for these programs, so that amateurs like me can make websites. There are plenty of YouTube videos to show you how to make a website using Expression Web 4.
Of course, you will need to purchase a domain name, and then also a hosting plan. They are very reasonably priced for a year. I love KnownHost, where can you buy both at the same time. The company is in Texas. I have never had any problems with this company since 2013. But Netfirms (a totally different company in Canada) sucks big time, which I unfortunately had for 11 years, and should have left a long time before I did. I had hundreds of issues with this company.
Over the past ten years the world has started using many more mobile devices. I started my website ministry in 2002, when hardly anyone was using mobile devices. Although the military began using the internet since the 1960's, public internet wasn't available until August 6, 1991, and the first mobile devices didn't appear to the public until around 1997. But nowadays in 2022 if you have a website, you absolutely need to make all of your webpages Mobile Responsive. That simply means that on mobile devices, your webpage will respond so that it resizes everything to look better and readable on that devices.
The simple internal CSS (Cascading Styles Sheets) codes that I have shared with you do two things. The first code sets your viewpoint. It tells the browser what to do if on a mobile device, which in this case the code tells it not to shrink the webpage, so your viewers can read the font.
The second internal CSS code tells the browser on a mobile device to resize every image (the “img” tag) to best fit the screen. If you didn't use this helpful internal CSS code in the head section of your webpage, then you'd have to put this inline CSS code in each individual “img” tag...
<!-- code to make individual image appear 100% size, but will shrink if screen is smaller -->
<img src="nameofimage.jpg" style="max-width: 100%; height: auto;">
<!-- end of code to resize image -->
But that will only affect that one particular image, so you'd have to use this code for all of your images, which is tedious if you have many images. But I showed you this code anyway, in case you didn't want certain images to resize for whatever reason. Obviously, you wouldn't use both internal and inline codes at once, which would conflict. So as you can see, using an internal CSS code in your head section saves A LOT of time. I much prefer using the internal CSS code in the header. External CSS code means that you have a separate .css file somewhere in your website's directory (file structure). Those are the three types of CSS code (external, internal and inline).
How To Make YouTube Videos Resize To
Fit Screen
Let me share some other helpful CSS code that might prove helpful on your webpages. If you are embedding YouTube videos into your webpage, the following internal CSS code will cause each YouTube video to resize to fit a mobile device. It is called making your videos “fluid.”
<!-- code to make all YouTube videos on web page fluid. Paste this code into HEAD section-->
<script>
iframe
{
width: 100%;
height: 56.25vw; /* 16:9 ... 56.25vw means 56.25% of the viewport width*/
}
</script>
<!-- end of fluid YouTube videos code -->
The above code will affect
every YouTube video on your webpage, because YouTube provides their code
in an iframe. If you click on “share” for any particular YouTube video, you
will see an option to “embed.” Simply copy and paste that code into your
webpage to embed the video. It will play on your webpage if someone clicks
the play button.
Those Dreaded Tables
I am still learning day by day about using code. I haven't found any workable solution for resizing codes on a webpage. There may be, but I haven't successfully been able to find any code that works. So the best thing, in my humble opinion, is to take your tables with 3 or 4 columns, and just make them 1 or 2 tables. I am now learning Bootstrap, which is a lot of fun to work with, but it is a whole different ballgame than the old method of just coding with HTML code and CSS. Bootstrap uses HTML and CSS, but it is awkward to get used to (at least is it so far for me as an amateur). Ideally, if you can avoid using tables, that will guarantee that you webpages will appear better on mobile devices. Keep in mind that I am NOT an professional web designer.
I hope some of that is helpful. But at least now you know how to make a basic webpage Mobile Responsive, by simply pasting this CSS code into your header section of any webpage. You need to do this for each webpage. The faded gray comment tags that I used earlier are just for information, you can remove them if you want to, they don't do anything...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
max-width: 100%;
height: auto;
}
</style>
Kindest regards and thank you for visiting my website.
