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.
677
questions
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 ...
- 11
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 ...
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 ...
- 27
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 ...
- 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&...
- 354
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" ...
- 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">...
- 51
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 ...
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 ...
- 21
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 ...
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 ...
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 ...
- 153
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 ...
- 153
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 ...
- 457
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 ...
- 243
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-...
- 133
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 (...
user123173
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, ...
- 11
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 ...
- 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, ...
- 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:
<...
- 161
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>
<...
- 135
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 ...
- 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 &...
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 ...
- 53
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 ...
- 53
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 ...
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 ...
- 161
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 ...
- 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 (...
- 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 ...
- 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 ...
- 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 ...
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 ...
- 457
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 ...
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 ...
- 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 ...
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 ...
- 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 ...
- 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?...
- 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 ...
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 ...
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. ...
- 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 ...
- 483
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? ...
- 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 ...
- 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 ...
- 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 ...
- 25
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 ...
- 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 ...
- 161