Questions tagged [css]

CSS, short for Cascading Style Sheets, is a language used to control the presentation (including colors, layout, and fonts) of HTML and XHTML documents.

Filter by
Sorted by
Tagged with
0
votes
1answer
6 views

Background image from a CSS file is not shown

The page in my website here should have a background image. Here is the image. The image is listed in the CSS file. But, when I reload the page, the background image is not displayed, and I see the ...
3
votes
2answers
62 views

Display SEO-friendly musical chords above text in HTML

I'm currently rendering guitar chords above lyrics on my website like this: span.chunk { position:relative; top: 15px; display: inline-flex; flex-direction: column; vertical-...
2
votes
1answer
70 views

Should I use CSS to hide a duplicative menu or does it need to be removed from the page source for SEO?

The only thing I have in my sidebar menu is a navigation menu and the only thing that makes that navigation menu unique is a link to my contact form instead. I think to remove the burger-sidebar (...
1
vote
3answers
41 views

Is SEO affected by CSS or JS that hides content after a few seconds after the page loads?

I was instructed to implement a "filter" in some pages on a corporate website, the filter hides the page content and ask for a valid email to continue reading. Sort of an opt-in but forced, ...
1
vote
3answers
237 views

SEO (speed): SVG vs background-image vs image tag

I know this has been asked multiple times, but I really could not find an answer. I have a relatively small logo (icon) and I need to load it multiple times on specific places. I was wondering: should ...
2
votes
1answer
39 views

Does Lighthouse sometimes miss preload links if non-preload link is also present?

I added preload links to my site for two CSS files, and this was by far the biggest improvement opportunity listed in the Lighthouse audit. I added the preload links, and ran a new Lighthouse audit, ...
3
votes
2answers
53 views

Can you force text to not display if font is not loaded?

I am using a custom font to display some text at the beginning of my blog post. What I desire, is for the text to display only if the font has been installed by the user. Here is my first attempt: <...
1
vote
1answer
2k views

Tailwind CSS text and image on same line?

Using Tailwind CSS <!doctype html> <html> <head> <meta charset="UTF-8" /> <link href="tailwind.css" rel="stylesheet"> </head> <...
4
votes
3answers
91 views

How to deal with minification

Sorry for such a noob question, I just started learning web development. But I am confuse on how do you handle minification on JS and CSS. For example you minify your JS, CSS files for release but ...
1
vote
1answer
171 views

How do you use preload links for CSS containing only @font-face?

I'm declaring preload links for a CSS file containg ONLY @font-face rules. Should I add <link rel="preload" href="styles.css" as="style"> as="style" or &...
2
votes
0answers
25 views

Accessibilitywise, how long should submit buttons in forms be?

Accessibilitywise, how long should submit buttons in forms be? Is there a worldly accessibility standard for minimal height (as with min-height or font-size+padding CSS directives) for submit buttons ...
2
votes
1answer
69 views

What is the smallest, standard pixel viewport for smartphones?

I am trying to develop a simple CMS-agnostic, HTML-PHP-JavaScript-CSS mobile-first contact form. I want to give my <form> tag a minimal satandard width (not min-width but width which is by ...
5
votes
0answers
78 views

Does a <link rel="stylesheet">` with a non-matching media value download sync or async, render-blocking or non-render-blocking?

I'm looking for an authoritative reference with regard to whether <link rel="stylesheet"> with a non-matching media attribute value downloads synchronously or render-blocking or ...
0
votes
0answers
21 views

Google Lighthouse gives a warning that the Module.css files in my DotNetNuke (DNN) modules are render blocking resources

How can I fix my DotNetNuke modules from causing render blocking?
5
votes
0answers
61 views

How do search engines treat spaces that are not U+20?

Introduction A problem with writing HTML pages for agglutinative languages, is that search engines generally work poorly when trying to parse them. Often-times, searches with correctly written ...
1
vote
0answers
11 views

Safari causing checkbox to change height and not be selected

Having an issue with Safari rendering a checkbox oddly. On https://www.iq-mag.net/subscribe/ if you select a subscription and choose "Subscribe Now" the subsequent page has the issue (don't ...
5
votes
2answers
728 views

Can I use numbering to decorate headings for readability in CSS without hurting SEO?

I attached the file. When designing(decorating, styling) h1, h2, and h3 tags for SEO, I am worried. These h tags form a certain hierarchy. For example: h1-h2-h3 (title1 title2 title3) h1-h2-h2 (...
0
votes
0answers
27 views

Can this code using 'display:none' hurt my SEO? [duplicate]

I'm trying to solve a problem with a content that I'm putting in a page with an iframe, the problem is: I want the SEO of that iframe but in the principal page, I wrote a collapse with JavaScript but ...
2
votes
0answers
31 views

printable responsive layout [closed]

I'm quite a newbie in web design. I'm starting off with a W3 template. Please see this one as illustration: https://www.w3schools.com/w3css/tryw3css_templates_food_blog.htm . I'm trying to implement ...
1
vote
0answers
111 views

Prevent images from loading in display:none container until the container is shown

As a newbie to website development, I'm struggling to optimise my website to get it to load content only when needed. Aim: to stop the tab that has all the photo content from loading until the user ...
7
votes
1answer
3k views

How do you avoid cumulative layout shift with responsively sized images?

On my site Google Webmaster Tools says that a bunch of pages have cumulative layout shift (CLS) errors. Otherwise known as jerky loading. On my page images are always in a div with a class that sets ...
0
votes
2answers
53 views

Android browser compatibility checking

Apart from the suggestions made in How can I see what my web site looks like in various browsers?, I have actively downloaded the 3 major browsers (Chrome, Firefox and Internet Explorer) and I check ...
1
vote
1answer
119 views

Do CSS libraries like Bootsrap hurt SEO and Google rankings?

Recently one of my coworkers, insisted on that i should rework a project, just because I used Bootstrap as a grid system. He argued "that usage of CSS libraries (especially Bootstrap) is the one ...
3
votes
1answer
123 views

Best practice for measurements relative to screen size, on mobile devices?

What unit or approach is best (or at least good!) practice for using measurements relative to screen size? I'm constraining this question to mobile devices, which I suspect may affect the answers. I'd ...
3
votes
1answer
341 views

How to redirect to style sheet after switching domain names?

We have switched domain names from example.com to example.org . I have set up a general 301 redirect for all of the site URLs in the .htaccess file on the example.com server and all the pages are ...
1
vote
2answers
39 views

Could styling <abbr> tag with CSS penalize SEO?

I heard that styling <strong> tag with css (for example to make in in normal font weight) could lead to penalties in ranking. I am wondering if I can css styles <abbr> tag without be ...
1
vote
0answers
95 views

How do I configure WordPress so that it doesn't make calls to `wp-ajax` now that I'm no longer using a side cart plugin?

I was using WooCommerce side cart plugin on my website. I noticed that the plugin caused heavy process on my web site, so I decided to remove the plugin. I tested my website with gtmetrix. For the ...
0
votes
1answer
2k views

How to manually add expire header for google fonts css files? [duplicate]

i am trying to boost my website, but when i look it on gmetrix it says following statement There are 6 static components without a far-future expiration date. https://fonts.googleapis.com/css?...
1
vote
1answer
30 views

Is there a CSS or JS solution to stop bad word wrapping arround images on mobile?

I have a blog post here which works fine on a larger screen but not so much on a smaller one. As you can see from the screenshot below the paragraph breaks very poorly around the image. Given how ...
0
votes
1answer
109 views

Switching between alternate CSS stylesheets - what are all the available settings?

What are all the available settings for stylesheet <link> elements? When deploying CSS stylesheet <link> elements, what are all the available settings? A persistent stylesheet looks like ...
1
vote
0answers
14 views

How can I make this type of outline-type menu? [closed]

I really want to add this kind of expandable outline-type menu to my website. I've seen it before in digital help manuals, but I've never seen one online. Each item would link to a page in my website. ...
2
votes
1answer
44 views

Why are my Tag Manager triggers never firing when I set the condition to "matches CSS condition"?

In Tag Manager, I set up a Link Click trigger with these conditions: Click Classes > matches CSS selector > .amazon-button But for some reason, when I click on an Amazon button, the trigger never ...
1
vote
0answers
18 views

Are there SEO repercussions of using ::before selector to add content to the page?

I'm working on a website where I don't have full access to the code. I'm having to use a ::before content selector to add a sub-header. Are there any known SEO repercussions from doing this? ...
1
vote
1answer
36 views

Not Hiding but REMOVING content for mobile

I understand using media queries and display:none to hide content for mobile. The problem is that the content still downloads. I found this older post that has a similar issue, but hoping for more ...
3
votes
2answers
884 views

Numbered lists using <h2> and <h3> tags impact on SEO

I have several blog posts with list or a series of steps. I.e., 1. First Item/Step blah, blah, blah 2. Second Item/Step blah, blah, blah 3. Third Item/Step blah, blah, blah These steps are ...
0
votes
1answer
20 views

Is there a text editor that auto reloads the page in the browser as I type? [closed]

I'm new to web design and working on some complex CSS and currently I'm working with the dev tools in FireFox and tweaking the CSS there then switching to Sublime Text to retype the altered CSS. Is ...
2
votes
1answer
222 views

Is there a purpose for CSS media queries using mobile DPI resolution?

Often see people give DPI resolution on his Media Query for mobile. What is it for? Does it serve a purpose? Do we need it? I normally build my media queries for all devices (desktop, tablet and ...
2
votes
0answers
30 views

Recommend Method for Showing Filtered Data?

Let's say you're displaying a list of products and you can filter the products by different attributes. The filtering is purely front end. Is it recommended to put all the products in the HTML and use ...
2
votes
1answer
44 views

Is a child element set to visible while its parent set to hidden bad for SEO?

To modify the style of a component within a framework, I need to set the visibility of the parent container to hidden and the visibility of its child that contains the content to visible. Is that bad ...
3
votes
1answer
32 views

Can robots.txt be used to prevent bots from seeing lazily loaded content?

Let's say that googlebot is scraping https://example.com/page. example.com has a robots.txt file that disallows /endpoint-for-lazy-loaded-content, but allows /page /page lazy loads content using /...
1
vote
1answer
2k views

Problem with padding on Firefox and Chrome

I am trying to make a responsive website (Desktop, Tablet, and Smartphone), and I would like to show it in different browsers. This is how I built my links with nav-element on my html site: <nav ...
1
vote
0answers
22 views

Background Color - breakpoint for mobile [closed]

Trying to help for a page - https://example.com/. If I scale my desktop browser - smaller like I'm trying to view as a tablet/phone ..the header has a red background... How can I make the full ...
5
votes
3answers
80 views

Does rendered HTML from an angular app need to be styled and pretty when shown just to search engine bots?

I have an angular app, and while google does index those now, many other sites do not. I have built some middleware that intercepts requests from crawlers and serves static HTML pages that those ...
2
votes
2answers
67 views

How does google treat h1-3's that are styled to be smaller than a lower class of heading?

For example: You have you h1 <h1>Epic SEO Keywords</h1> then right below <h2 class="Massive text">Enjoy the future of you, visualise your dreams</h2> Will Google render ...
2
votes
1answer
491 views

How can I combining many external Javascript scripts into one?

I check my website using gtmetrix and my website is recommended for fewer HTTP requests and reduce DNS lookups. So I must to combining combining many external Javascript scripts into one In my layout ...
5
votes
2answers
671 views

AdSense units don't respect CSS margin rules

I just noticed that on sites with "auto ads" enabled, auto-placed AdSense units don't follow CSS rules regarding margin or padding in mobile view. They display across the entire viewport instead of ...
0
votes
3answers
58 views

Where do I put my static HTML and CSS files when migrating my site from Joomla?

I previously made a website with the Joomla CMS. Once it was online, I started over from scratch to re-do my website using only handwritten HTML/CSS (and a little of JavaScript). My question is: How ...
2
votes
1answer
356 views

How to fix Mobile Usability Issues (page resources are not loaded) in Google Search Console

Our website is responsive but it is showing the below mobile usability issues at Google search console. Content wider than screen Clickable elements too close together Text too small to read When we ...
-1
votes
1answer
50 views

How do I keep a raw HTML version of my website alongside one with CSS styles and classes applied [closed]

I am in the process of making a simple website with informational content and I am interested in keeping a raw html version of my website (that is without any divs or other things that are used to ...
1
vote
0answers
24 views

Selecting a forms “select” option based on referring URL [closed]

I have a seemingly simple question that I can’t find an answer for. Scenario: I am developing a ”single-page” website based on a HTML5 UP! template that shows/hides content after clicking a button ...

1
2 3 4 5
14