Tips for making sure an image appears in the Reader Viewer

I have created a setup using HTML/CSS to showcase images of screenshots for my product:

<p>Take a look at these screenshots:</p>
<div>
<a href="images/pic1.png" target="_blank" title="Screenshot 1">
<img border="0" src="images/pic1.png" class="wbrdr"></a>
<a href="images/pic2.png" target="_blank" title="Screenshot 2">
<img border="0" src="images/pic2.png" class="wbrdr"></a>
</div>

Using the following CSS properties:

img.wbrdr
{
    padding: 1px;
    border: 1px solid #cccccc;
    -moz-box-shadow: 3px 3px 3px #cccccc;
    -webkit-box-shadow: 3px 3px 3px #cccccc;
    box-shadow: 3px 3px 3px #cccccc;
    height: auto; 
    width: auto; 
    max-width: 200px; 
    max-height: 200px;
}

Although this layout functions correctly when viewed normally, I encountered an issue while trying to access it in "Reader View" on Safari in iOS or "Reading view" on Microsoft Edge:

https://i.sstatic.net/rHFHM.png

The screenshot images did not render as expected in those instances. (However, they displayed properly in Firefox.)

Any insights on what could be causing this discrepancy?

htmlcsssafarimicrosoft-edgereader

Answer №1

When I tested the code you provided in Microsoft Edge, I noticed that the Reading view icon appeared grey.

After adding some additional paragraphs, I discovered that screenshot images could be displayed in Reading view in Microsoft Edge without needing to be wrapped by <div>. You can try out the sample below in Microsoft Edge:

<h2>Creating a visually appealing layout</h2>
<p>Some online articles can be difficult to read due to the cluttered layout. With reading view in IE 11, our goal was to provide a more pleasant reading experience – where the page feels easy on the eyes. We focused on aspects such as column width, line height, and text size to achieve this.</p>
<p>For instance, we ensured that changing the font size in reading view also adjusted the line spacing accordingly. We also paid attention to padding around columns, images, and paragraphs. The aim was to create a clean, distraction-free page that allows readers to easily navigate through the content. </p>
<p>Take a look at the following screenshots:</p>
<a href="images/pic1.png" target="_blank" title="Screenshot 1">
    <img border="0" src="images/pic1.png" class="wbrdr">
</a>
<a href="images/pic2.png" target="_blank" title="Screenshot 2">
    <img border="0" src="images/pic2.png" class="wbrdr">
</a>

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

Tips on creating reusable scoped styles for 3 specific pages in Vue.js without impacting other pages

Our project includes global classes for components that are utilized throughout the entire system. <style lang="scss" scoped> .specialPages { padding: 0 10px 30px 10px; } /deep/ .SelectorLabel { white-space: nowrap; al ...

cssvue.jsvuejs2vue-component

Make sure to utilize the className attribute when styling a Material-UI component

I am attempting to apply CSS styles to a Material-UI component. defined in MyCss.css .trackTitle { color:white; } located in myComponent.js import "./MyCss.css" <Grid container item xs={1} className="trackTitle"> change col ...

javascriptcssreactjs

Unable to interact with a button through Selenium

Utilizing the Selenium library in Java, I have written a script to automate tasks online. The script functions perfectly on popular sites such as Facebook and YouTube, but for some reason, it does not work on kingdoms.com. The button I am trying to click h ...

javascripthtmlseleniumselenium-webdriver

Press the designated button located within a table's td element to retrieve the values of adjacent td elements

I need to implement a functionality where clicking a button within a <td> element will retrieve the values of other <td> elements within the same row (<tr>). Here is the current implementation: $(document).ready(function(){ ...

javascriptjqueryhtml

Displaying a box with a question mark using Glyphicon and Font Awesome icons

I'm having a problem with my website not displaying the Glyphicons or Font Awesome Icons. When I enter the code, it shows up like this: http://prntscr.com/8qwwmd. This is the first time I've encountered this issue and it's only affecting som ...

htmlcssfont-awesomeglyphicons

Is there a way to merge attribute selectors for elements that satisfy one condition or the other?

Is there a way to combine selectors effectively? <input type=number> <input type=date> I was able to successfully hide the arrows in a number field with the following code: input[type=number]::-webkit-inner-spin-button, input[type=number]::- ...

htmlcsscss-selectors

Angular CSS Animation not functioning as expected

I have developed a system that retrieves stored messages from the server dynamically. The view for this system is structured as follows: <div id= "messages" data-ng-controller="MessageController"> <div class="message" data-ng-repeat="message ...

cssangularjscss-transitions

Limiting the displayed portion of a table and implementing scrolling instead

I am currently working with a static HTML template that contains the following code: <table> <thead></thead> <tbody></tbody> </table> Using jQuery and AJAX, I am dynamically adding and removing rows and columns ...

javascriptajaxhtml

HTML/CSS: Customize form labels to appear alongside form fields in a single line

I've searched extensively, but none of the solutions provided have been effective for me. My issue involves trying to align two form fields and their labels on a single line, ensuring that both elements are in proper alignment. Despite my attempts u ...

htmlcss

Unable to get the div to properly follow when scrolling, even when using the fixed position attribute

My webpage is divided into two sections - left and right. I've used divs to create the left navigation and right content. However, when scrolling down the page, only the right portion scrolls while the left navigation remains fixed. I'm looking ...

javascripthtmlcss

Sending a concealed input according to the chosen option

I'm attempting to send some hidden values to a Servlet via a form, but my goal is to only pass them if the user chooses a specific option. <!-- FORM ABOVE --> <input type="hidden" name="foo" id="foo" value="foo"> <input type="hidden ...

javascripthtmlformsservletshidden-field

Creating a text gradient in CSS with a see-through background

Picture for Inspiration Example of HTML Design <div class="Heading"> Raffle <span>EXTRAVAGANZA</span> </div> Tips While not required, adding a gradient would enhance the overall look. ...

htmlcss

Troubleshooting a Button Problem with CSS in Twitter Bootstrap

Here is the original source (with problem) However, when attempting to replicate the issue in jsfiddle, I am getting the correct result What could be causing this discrepancy? How can I resolve this issue? ...

htmlcssbuttontwitter-bootstrap

Guide to align elements (cards) side by side in a row within a container element (div)

I have a question that bears resemblance to another one found on this site. I decided to create my own version of the Material UI Card example from https://material-ui.com/demos/cards/. You can view and edit my version on the sandbox editor by clicking he ...

cssreactjsmaterial-ui

Divide a compound element of TextNodes and elements by utilizing jQuery

Looking for a way to split an HTML element based on user selection using jQuery? Check out the example below with square brackets indicating the selection: Lor[em <a>ips]um <span>dolor</span></a> The desired output should be: Lor ...

javascriptjqueryhtmlselectioncontenteditable

Transform the snake code by incorporating a visual image as the face of the serpent

Can someone help me change the snake's face to an image instead of a color fill in this code? And how can I add arrows for mobile compatibility? (function() { // Insert JS code here })(); // Insert CSS code here This code snippet includes functi ...

javascripthtmlcss

Steps to display a div element periodically at set time intervals

I've created a user greeting message that changes based on the time of day - saying Good Morning, Good Afternoon, or Good Evening. It's working well, but I'm wondering how I can make the message hide after it shows once until the next part o ...

javascriptphphtmlcsssetinterval

Issue with Django: Javascript not loading correctly in HTML page

Why won't my Django website load javascript files, even though the css part works fine from the same Static folder? base.html: <head> {% load static %} <meta charset="UTF-8"> <link href="{% static 'login/css/bootstrap ...

javascriptpythoncssdjangostatic

Tips for preventing flex items from having equal height when collapsing

When I try to place elements from an array in a list with display flex, the height of other elements gets modified when one is collapsed. I have attempted different display and inline placement on li elements but nothing has worked so far. Is there a way ...

javascripthtmlcssbootstrap-4

Guide on setting up and duplicating a template in Vue.js

Allow the user to create multiple person entries by clicking a button with the method "useIt()". A template has been created for this purpose. When the button is clicked, the template should be duplicated and added to the container div. This functionality ...

javascripthtmlcssvue.js