It's common for designers to provide me with responsive designs that adjust the text of an element depending on the screen size.
On Desktop: Read more
On Mobile: Read
On Desktop: Download PDF
On Mobile: Export
On Desktop: Click here
On Mobile: Tap here
What is the proper method for displaying different text in desktop and mobile versions of a website?
To achieve this effect, you can leverage media queries, pseudo classes, and a touch of creativity:
a[data-mobiletext] {
background-color: #FC0;
}
@media screen and (max-width: 700px) {
a[data-mobiletext] {
background-color: #CF0;
}
a[data-mobiletext] span {
display: none;
}
a[data-mobiletext]:after {
content: attr(data-mobiletext);
}
}<a href="/" data-mobiletext="Read"><span>Read more</span></a>
<a href="/" data-mobiletext="Export"><span>Download PDF</span></a>
<a href="/" data-mobiletext="Tap here"><span>Click here</span></a>For the Desktop version, click on "Full Page".
In my experience, I have employed a few different strategies when clients have had similar requests and were not dissuaded:
1) Utilize Javascript to dynamically adjust the text based on screen width and device detection techniques;
2) Start with your preferred text choice as the default, wrap it in a span or similar element, display what you believe is most suitable for all devices (taking into account SEO, content, and accessibility for screen readers), then utilize pseudo-selectors like :before along with the content: '' property to show alternative text based on media queries. Conceal the default span/element as needed.
(*) That being said, it may be worthwhile to review your content and identify a universal label for these items as a best practice approach.
I've been working on a Material-UI Table where I customized the headers and table styles. While testing it locally with yarn start, it looked like this: https://i.stack.imgur.com/7yU2H.png However, when I viewed it on the remote system, it appeared ...
Using the latest versions of Firefox and Chrome with jQuery 1.x edge. When an ajax request returns a single line of minified JSON text like this: { "fromSymbol": "\\u04b0", "toCurrency": "AUD", "toSymbol": "\\u0024", "convFact ...
Is there a way to achieve space-between alignment when elements are stacked vertically in MUI Grid instead of using flex? I've come across suggestions involving giving flex:1 and height:100%, but I'm specifically interested in achieving this with ...
I am working on creating a pop-up image for my internship project. When the user clicks on an image, I want it to display in a larger size with a background and opacity. However, the code I have implemented so far is not functioning properly. Please ignore ...
I have been struggling with a persistent issue and have attempted numerous solutions to resolve it, but the problem persists. When using the web app on Google browser with my phone, I encounter an issue where the footer overlaps with the keyboard. Has anyo ...
When the variable foo is defined, why does the following code behave in a certain way? var array = [].push(foo); When executed, why does the output equal 1? Based on my testing, the variable array simply returns the length of the array. Therefore, if ...
I've been working on a blog site using next.js. Initially, I had a home page that was a server component, but I wanted to convert it into a client component to add interactivity like pagination. However, after converting the code to a client componen ...
When a user is on the page labeled as Default, clicking on the navigation link to go to Page2 should result in loading the <div> with the id of container. Additionally, there is a requirement to retrieve another <div> with the id of includeScri ...
I'm currently working on a method to achieve the following task: Embedding a specific string (such as "TEST") into the content of an HTML page, after every certain number of words (let's say 10). The challenge here is ensuring that the word count ...
If I have a webpage containing content positioned relatively and absolutely, along with scripts and various styles applied. Is there a universal method to move down the entire page content by 50px, creating an empty space at the top of the page? The solut ...
When starting my project using angular2-webpack-starter, the initial loading of index.html allows us to create our own components. However, in my case, I am looking to first direct users to a static page without any Angular code before clicking a button th ...
I have an array of profiles containing various skills. Each profile has its own set of tags to describe their skills. For example: profiles = [ { name: "John", skills: ["react", "javascript"]}, { name: "Jane", skil ...
Can anyone provide a jQuery code for validating the following HTML structure (view it on Jsbin)? HTML: <p id="options"> <strong>Options:</strong> <span> <input type="checkbox" name="ids" value="101" id="opcao-0"> <lab ...
I am currently delving into the realm of JavaScript and MongoDB while attempting to construct a basic blog engine. My goal is to retrieve all blog posts stored in MongoDB so that I can utilize this data to populate an EJS template. Although I successfully ...
I am looking to create a script in JavaScript that can detect whether a sidebar has the class "active" or not. The sidebar is controlled by Bootstrap's toggle button, which adds the "active" class when clicked. <button type="button" id="sidebarCol ...
I have successfully created a basic 3D scene using JavaScript. The scene features a THREE.SphereGeometry paired with a THREE.MeshNormalMaterial. However, I am now faced with the challenge of adding a text layer on top of the Three.js scene. Query: What is ...
I'm working on a project with a slideshow, but I've noticed that when it transitions between images, it can be quite abrupt. I'd like to find a way for it to change smoothly from one image to the next. <div> <img class="mySli ...
After collaborating with fellow coders to develop info boxes using HTML, CSS, and JavaScript, I have come across an issue with the hover functionality not working properly in Internet Explorer. Interestingly, everything functions flawlessly on Google Chrom ...
I have been tasked with integrating a graphical widget into a React component for a project I am working on. The widget_api code provided by RIPE Stat is required to accomplish this. Previously, in HTML5, the integration was successful using the following ...
1) To create a webpage, I relied on Bootstrap. 2) In the CSS FILE, I implemented the following media query to supersede the Bootstrap design. @media screen and (min-width: 500px){ body {color: #ccc;} } Despite this, the body color remains unchanged afte ...