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
1 vote
1 answer
33 views

Locally Hosted Graphic User HTML Editor for Web Developing

I'm currently developing a new website for a small business, but I'm the only one that can edit via HTML/CSS/JS files. My boss doesn't want to rely on CMS for some reason, but wants some sort of GUI ...
user avatar
0 votes
0 answers
6 views

HTML/CSS/JS - Issues creating two vertical sections [migrated]

I'm trying to create two vertical sections for a web page I'm making (using netlify connected to my github repo) and I cannot seem to set up two vertical sections. I'd ideally like for the left-most ...
user avatar
2 votes
1 answer
27 views

Does Google index text from CSS and HTML files?

Our website's template is for a job directory site, but it was repurposed for a school directory. The CSS, HTML, and PHP strings still show Company in the code, but the company name can't be seen on ...
user avatar
2 votes
1 answer
13 views

Google Mobile Friendly Tester Issue - Preview Shown Is Very Small

The mobile friendliness tester is saying that my text is too small, and that clickable elements are too close together. I ensured that ALL text on the page was above 18 font to test, and Google still ...
user avatar
  • 121
0 votes
0 answers
7 views

CSS to force a container to properly fit around `<embed>` text, without introducing scroll bars? [migrated]

I have a figure that contains an <embed> element: <head> <meta charset="UTF-8" /> <title>Matroid Partitioning</title> <meta name="viewport&...
user avatar
0 votes
0 answers
8 views

Keep symbol and text on same line? [migrated]

I've got this and it's not working <div class="header"> <img src="./images/3d-graph-model.png" style="padding: 15px 0px 22px 0px" alt="3-d graph" ...
user avatar
  • 123
2 votes
2 answers
45 views

SEO-friendly duplicated (decorative) text

is there any "SEO-friendly" way to show a page title like below? It's easy to implement with an HTML code like this: <h2>Sample Title</h2> <span class="shadow">...
user avatar
0 votes
0 answers
23 views

Why can I use Google web fonts in CSS without an Internet connection or them being installed locally on my computer?

I used a Google font for my website, which isn't stored locally on my computer. When I refresh the page, nothing goes wrong and the font is working fine. However, when I disconnect my Internet ...
user avatar
2 votes
1 answer
36 views

What is this symbol (appears before line break)?

On Pixel 6 (Android) using the Chrome browser, there's this strange symbol I've never seen before that usually appears before some of the line breaks on my website. Does anyone have any idea what this ...
user avatar
1 vote
1 answer
59 views

Does onclick animation affect SEO?

We want to build the website with mind-blowing animations, but SEO is also important for us and I am wondering about the SEO effects in the case of CSS and JS animations. Let's say we want to build ...
user avatar
3 votes
1 answer
88 views

Is Largest Contentful Paint (LCP) measured only above the fold?

A lot of sources mention that LCP is measured only above the fold, and stops measurements after a user action like scroll or key press. Though, I am able to get LCP for an image which is lazy-loaded ...
user avatar
1 vote
1 answer
60 views

Core Web Vitals - Field data difference Mobile vs Desktop

I am observing a strange problem related to Core Web Vitals, I have same website for both mobile and desktop(same server/same page/same DOM size) but I when I look into search console I get different ...
user avatar
4 votes
1 answer
120 views

Core web vitals - LCP is being recounted on element outside viewport

I have been trying to control LCP on my website but unfortunately a strange phenomenon is continuously occurring, An element which is not in viewport is considered to be an LCP. Opposite to that ...
user avatar
4 votes
1 answer
50 views

Responsive Websites <meta name="viewport" content="width=device-width, initial-scale=1">

Everywhere I look (e.g. Web.dev), it tells you that you must use <meta name="viewport" content="width=device-width, initial-scale=1"> in the header of your HTML file, so ...
user avatar
2 votes
1 answer
80 views

How JSON works in HTML Script Tag regarding SEO Search availability?

I know this topic already all over the forum. But still, I'm confused if there is no exact example of what they mean with dynamic render using Javascript. so here is the background of my question: I ...
user avatar
3 votes
2 answers
100 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-...
user avatar
2 votes
1 answer
79 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 (...
user avatar
1 vote
3 answers
51 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, ...
user avatar
1 vote
3 answers
762 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 ...
user avatar
  • 386
2 votes
1 answer
46 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, ...
user avatar
  • 801
3 votes
2 answers
56 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: <...
user avatar
2 votes
1 answer
4k 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> <...
user avatar
4 votes
3 answers
99 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 ...
user avatar
  • 141
1 vote
1 answer
278 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 &...
user avatar
2 votes
0 answers
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 ...
user avatar
2 votes
1 answer
117 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 ...
user avatar
5 votes
0 answers
95 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 ...
user avatar
5 votes
0 answers
94 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 ...
user avatar
1 vote
0 answers
20 views

Safari causing checkbox to change height and not be selected

Having an issue with Safari rendering a checkbox oddly. On my site if you select a subscription and choose "Subscribe Now" the subsequent page has the issue (don't worry, you don't need to ...
user avatar
  • 254
5 votes
2 answers
746 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 (...
user avatar
  • 51
2 votes
0 answers
32 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 ...
user avatar
  • 21
1 vote
0 answers
148 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 ...
user avatar
  • 111
8 votes
1 answer
4k 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 ...
user avatar
0 votes
2 answers
65 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 ...
user avatar
1 vote
1 answer
261 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 ...
user avatar
3 votes
1 answer
124 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 ...
user avatar
  • 399
3 votes
1 answer
463 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 ...
user avatar
1 vote
2 answers
44 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 ...
user avatar
  • 119
1 vote
0 answers
104 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 ...
user avatar
  • 61
0 votes
1 answer
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?...
user avatar
  • 1
1 vote
1 answer
37 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 ...
user avatar
0 votes
1 answer
125 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 ...
user avatar
1 vote
0 answers
17 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. ...
user avatar
  • 11
2 votes
1 answer
46 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 ...
user avatar
1 vote
0 answers
21 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? ...
user avatar
  • 19
1 vote
1 answer
38 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 ...
user avatar
  • 531
3 votes
2 answers
1k 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 ...
user avatar
  • 2,846
0 votes
1 answer
22 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 ...
user avatar
2 votes
1 answer
246 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 ...
user avatar
  • 151
2 votes
0 answers
33 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 ...
user avatar

1
2 3 4 5
14