Override current website to display the mobile version

Few limitations to consider.

  1. Dealing with Sharepoint 2013, which can cause some issues from time to time. Hopefully won't affect the outcome.

  2. Unable to modify the viewport meta tag for the site.

  3. The website is a preexisting large site that was not developed by me; I'm currently tasked with creating a new print-css that leverages the tablet view for all pages without starting from scratch.

  4. Bootstrap version 4 is heavily utilized throughout the site.

With this scenario in mind, my objective is to find a way to compel a page to use the same CSS as a device with a width of 800px would when it's being printed.

I've been struggling to come up with a solution and am beginning to think it may be impossible. Despite numerous attempts to figure it out, I haven't found any similar cases via online searches.

Preferably, I'd like to tackle this through the print CSS, but I'm willing to consider unconventional methods at this point as long as they only impact the print view.

csswebbootstrap-4

Answer №1

To create a print-friendly version of your website, you can use the same media queries that target a screen size of 800px or less. This will ensure that your content is optimized for smaller screens and print views.

By applying the following CSS code snippet, you can set the text color to red for both smaller screens and print views, while leaving larger screens unaffected:

@media only print, only screen and (max-width: 800px) {
  .red {
    color: red;
  }
}
<div class="red">Red Text</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to include the border-radius CSS property to a dropdown element in Ant Design?

Adding the border-radius CSS property to my dropdown component from ant design has been a bit challenging for me. I attempted to modify the antd-css file and include a style object directly into the component, but unfortunately, I did not achieve the des ...

cssreactjsantdstyled-componentsant-design-pro

Exploring the power of Angular by implementing nested ng-repeat functionalities:

I am currently working on an ng-repeat feature to add items from the array (album array). Everything seems to be functioning correctly. However, I also have a colors array that should assign different background-colors to the card elements of the album arr ...

javascripthtmlcssarraysangularjs

Tips for toggling the visibility of a <div> element using PHP code inside

I'm having trouble with a dropdown list that is supposed to show/hide some divs containing PHP files. However, when I try to toggle the visibility of the divs using the dropdown list, it doesn't seem to work as expected. Can anyone help me figure ...

javascriptphpjqueryhtmlcss

Tips for aligning inputs vertically and stretching them horizontally with bootstrap flex only

For a practice exercise, I want to achieve vertical left alignment and horizontal stretching of input fields using only Bootstrap Flex (or CSS3 flexbox), without relying on Bootstrap Grid or CSS3 grid layout. Here is the code snippet (also available on co ...

htmlcssbootstrap-4flexbox

Fixed navbar at the top changes from absolute positioning to relative when scrolling

My goal is to dynamically change the position of the navbar from fixed to absolute as the user scrolls past 600px. Initially, I used the following code: if (scroll >= 700) { $(".navbar-fixed-top").addClass("navbar-scroll"); } else { $(".navbar ...

jquerycssnavbar

Conceal information from view without hiding pseudo content visually

Here's a method I'm using to incorporate icons through the use of :before or :after pseudo content: <span class="icon icon__example is-content-visually-hidden">assistive text</span> Is there a way to hide the assistive text visually ...

css

Creating full-width divs using BootstrapLearn how to easily create full-width div

Bootstrap is being utilized in my current project. I have been creating divs inside columns, but they are not extending to the full width of the columns. Below is a snippet of the code: <!DOCTYPE html> <html lang="en"> <head> ...

htmlcssbootstrap-4

Making AJAX requests to retrieve data from a JSON database array, then utilizing the CSS visibility property to conceal HTML elements dynamically

As a enthusiastic beginner, I'm facing a challenge that seems to have no easy solution. Can someone please assist me with this: How can I assign all the ids from a JSON database to the variable dotContainer, in order to hide all corresponding HTML id ...

javascripthtmlcssjsonajax

Switch the background image of one div when hovering over a different div

Can anyone assist me with creating an interactive map where continents light up as you hover over them? I am using multiple images within div elements in order to achieve this effect. Specifically, I want to change the background image of one div when hove ...

htmlcss

Spinning divs using JavaScript when the mouse hovers over them, and then returning them to their original position when the mouse moves

I am looking to create a functionality where a div rotates when the mouse enters it and returns to its original position when the mouse leaves. Everything works fine when interacting with one div, but as soon as I try hovering over other divs, it starts gl ...

javascriptjqueryhtmlcss

Guide on storing images in a designated folder using CodeIgniter

My code is located in view/admin_view2.php <?php echo form_open_multipart('home_admin/createBerita'); ?> <div class="form-group" > <label class="control-label">upload foto</label> <inpu ...

javascriptphphtmlcsscodeigniter

Modifying the attributes/properties within a class of a bootstrap button

Here is the code that I have: <b-button id="search-button" size="md" class="mt-1 w-100" type="submit" @click="someEvent()" >Example </b-button If we imagine calling someEvent() and wanting to modi ...

javascriptcssvue.jsbootstrap-4bootstrap-vue

The integration of PHP code with an HTML form is causing issues

When I use the insert_teacher('bla bla','bla bla','dqsd') function in a PHP file, everything works fine. However, when I try to implement it with an HTML form, nothing is displayed and no data is inserted into my database. &l ...

javascriptphpjqueryhtmlcss

Revolutionizing Zen Cart with slimMenu

Is there a smarter person out there who can help me understand why the slimMenu is breaking when I add these files to the bottom of the page? <link href="includes/templates/westminster_new/css/age-verification.css" rel="stylesheet"> <script src=" ...

phpjquerycssjquery-cookie

Content is positioned to the left in a horizontal layout without a set width

I am currently assisting a friend with the development of her website. While I consider myself somewhat of an amateur in web design, I usually manage to overcome challenges by dedicating hours to searching for solutions online. However, this time I have no ...

htmlcss

Adjust the vertical alignment in Material UI Grid to allow for proper tab navigation while maintaining the original order

When using Material-UI's standard grid system, the alignment of a new grid item after all 12 "space units" are utilized is based on the longest element within those 12 "space units". Is there a way to disrupt this type of alignment? If you take a look ...

cssmaterial-ui

Tips for properly filling empty spaces in a flexbox layout using HTML

Is there a way to fill in the gap using CSS so that boxes automatically take up the empty spaces, even if they are of different sizes? How can I make sure the boxes adjust automatically as the screen size changes? .c1 { display: flex; flex-wrap: w ...

htmlcss

Bootstrap Progress Animation Not Scaling Properly

I am encountering an issue with my Bootstrap 2.3 progress bars. They are supposed to show async file reads and be animated by updating their CSS properties using jQuery. However, the problem I'm facing is that the scale seems to be off - when the prog ...

javascriptjqueryhtmlcsstwitter-bootstrap

When I update URLs in Django, my CSS breaks down

Recently, I encountered an issue on my website and found a solution by creating two separate HTML pages. However, when I modified the urls.py to differentiate the URLs for these pages, the CSS stopped working. Below is my code snippet and a detailed explan ...

pythoncssdjangourl

Vue.js and Bootstrap - The Collapsing Effect

I am currently facing an issue while working with Bootstrap 5.1 or 4.6 as well as Vue.js 2. The functionality I am trying to implement involves clicking a button that triggers a collapse function. Below is the code snippet from my first Vue component: &l ...

bootstrap-4vuejs2bootstrap-5