Is there a way of writing CSS to reduce the file size of a style sheet containing lots of adjoining classes. Example...
body .elementor-2 .elementor-element.elementor-element-949d9dd .elementor-widget-spacer,
body .elementor-2 .elementor-element.elementor-element-427933f .elementor-widget-spacer,
body .elementor-2 .elementor-element.elementor-element-cb8ce37 .elementor-widget-spacer {
margin-bottom: 0px;
}
hey Use :is selector to reduce the code please check. to learn more about it here
body .elementor-2 .elementor-element:is(.elementor-element-949d9dd, .elementor-element-427933f, .elementor-element-cb8ce37 ) .elementor-widget-spacer {
margin-bottom: 10px;
background: red
}
<div class="elementor-2">
<div class="elementor-element elementor-element-949d9dd ">
<div class="elementor-widget-spacer">spacer</div>
</div>
</div>
<div class="elementor-2">
<div class="elementor-element elementor-element-427933f">
<div class="elementor-widget-spacer">spacer</div>
</div>
</div>
<div class="elementor-2">
<div class="elementor-element elementor-element-cb8ce37 ">
<div class="elementor-widget-spacer">spacer</div>
</div>
</div>
If you use the widget spacer in a different position every single widget makes those classes with the different ids. So you can't reduce the classes.
So if you need not write all the classes on the CSS file.
Use this CSS.
body .elementor-widget-spacer {
margin: 0 !important;
}
or
body .elementor-widget-spacer {
margin: 0;
}
It works with all of the spacer widgets on the webpage.
if you are using elementor.you don't need to do it with custom CSS. Elementor has a dedicated control for this. edit the column, select the layout tab to find widget space, and make it 0. Inside the column, your widget gap will be 0.
Before Doing 0
After Doing 0
Or
you are not using Elementor you can go with :is().To learn more about it follow the article Here
Related
I am using single CSS file for all my pages, but I come across with this problem. I have an almost identical (with minor differences) element on two different pages ( let's say home page and about page; This is my CSS codes for a specific element in the Home page, I want to use this for another page with minor differences. How do I name those two classes,
Do I need to use completely separate class names like .home.topcontainer { and .about.topcontainer { etc, or is there any robust way handling this issue?
What is the best way of naming CSS blocks for different pages, if I am using a single CSS file for my whole website to avoid me get confused over class names?
Thanks
CSS
.top_container {
position:relative;
top:3px;
height:144px;
z-index:1;
background-color: #143952;
width: 90%;
left:5%;
right:5%;
font-family: 'Scope One', serif;
overflow:hidden;
min-width:900px;
The best practice is to add some relevant class in body tag (as you can see in several CMS like magento etc.) and then use like this:
<body class="home">
<div class="top_container">
<!-- Do something -->
</div>
</body>
--or--
<body class="about">
<div class="top_container">
<!-- Do something -->
</div>
</body>
now you can use css like:
.home .top_container{}
.about .top_container{}
Let's assume this is your Home page
<div id="home">
<div class="top_container">
//stuff
</div>
</div>
And this is your about page:
<div id="about">
<div class="top_container top_container_about">
//stuff
</div>
</div>
Now, in your CSS file, add the style for the 'top_container' class like so:
.top_container {
//css styles common to the top_container element
}
And then write the style that's unique to the top_container in the about section:
.top_container_about {
//css style unique to the about section
}
This is one way which takes advantage of the 'Cascading' property of a 'Cascading Style Sheet'.
Commonly used practice here is to use a base class and a variation to that base class. That way we use the base css-class for both elements and change it a little by overwriting some values with the variant-class. You didn't specify how you want the top containter to change but here is an example:
.top_container {
background: #000;
color: #fff;
width: 200px;
height: 50px;
padding: 10px;
}
.top_container.top_container--narrow {
width: 100px;
}
<div class="top_container">
Default
</div>
<div class="top_container top_container--narrow">
Narrow
</div>
I add the page name to the body class, and make changes like that using CSS like
.style {
margin: 0;
}
.home .style {
margin: 10px;
}
From what I learned in coding scss, it is better to make your class name a general one. In css only you can make it like this:
CSS
.top-container{
width: 100%;
}
.top-container.about{
width:60%
}
.top-container.contact{
width:30%
}
HTML
home.html
<div class="top-container"></div>
about.html
<div class="top-container about"></div>
contact.html
<div class="top-container contact"></div>
The about class will override whatever style you have in top-container. So its easy to use, short and quite simple. You can use this in making your class name a more general one.
If there are same elements on both pages such as Header then you can use the same class name for them on both pages so that they will look exactly identical on both pages. And for making some changes to those elements you can use different CSS selectors. In the below given code, I have used class and id as selectors.
I HOPE THIS ANSWER MEETS YOUR REQUIRMENTS.
Homepage: header background color is blue.
<header class="top_container" id="home_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
About page: header background color is red
<header class="top_container" id="about_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
CSS file:
.top_container{
background-color: blue;
color: white;
}
#about_header{
background-color: red;
}
I would do like so. Cause you might have a .top-container on every page you need to set like a "default" style for .top-container. So CSS Cascading Style Sheet. Cascade from top and if an element needs to be a little different just set the differences in a more specific defined class. Something like so:
.top-container {
/* apply all styles for .top-container */
}
.home.top-container {
/* this .top-container will have all styles from .top-container defined above */
/* so only define all DIFFERENT things for .home.top-container here */
}
.about.top-container {
/* define all DIFFERENT things for .about.top-container here */
/* like before it will always have the .top-container styles */
}
I am using Bootstrap 3 (and Angular) for a webapp. I have sidebars which can be toggled, they are not using bootstrap (but table-cell layout)
I created a demo here: http://plnkr.co/edit/0pGjRqfqF21lGvhuNb9k?p=preview
Is it possible to make bootstrap columns break relative to the actual with of the container they are in?
Example:
A col-sm-* should break if its container (aside-main) is <768px, not the screen ?
<div class="row" ng-controller="demoCtrl">
<div class="aside-container">
<div class="aside-main">
<div class="col-sm-12">
<h2>Main Content Area</h2>
<div class="row">
<div class="col-sm-6">
<strong>column 1</strong>
</div>
<div class="col-sm-6">
<strong>column 2</strong>
</div>
</div>
</div>
</div>
<div class="aside" ng-if="asideIn">
<div class="col-sm-12">
<h2>Aside Area</h2>
here is the aside content
</div>
</div>
</div>
In 2018 seems there are such possibilities.
According to the documentation of project https://github.com/marcj/css-element-queries all you have to do is following.
Let's say you have following html element.
<div class="parent">
<h2>Test</h2>
</div>
And you define following css
.parent h2 {
font-size: 12px;
}
.parent[min-width~="400px"] h2 {
font-size: 18px;
}
.parent[min-width~="600px"] h2 {
padding: 55px;
text-align: center;
font-size: 24px;
}
.parent[min-width~="700px"] h2 {
font-size: 34px;
color: red;
}
And include scripts
<script src="src/ResizeSensor.js"></script>
<script src="src/ElementQueries.js"></script>
Functionality of the project will find html elements that css is referring to and will only listen to changes of those elements.
"no performance issues since it listens only on size changes of
elements that have element query rules defined through css. "
e.g. when an element that is "watched" exceeds width of 400 on watched element will be added css attribute min-width 400px and defined css will be applied to it.
Also for this to work you need to trigger the event listening or initialization yourself:
var ElementQueries = require('css-element-queries/src/ElementQueries');
//attaches to DOMLoadContent
ElementQueries.listen();
//or if you want to trigger it yourself.
// Parse all available CSS and attach ResizeSensor to those elements which have rules attached
// (make sure this is called after 'load' event, because CSS files are not ready when domReady is fired.
ElementQueries.init();
It's not exactly breaking bootstrap columns, but you can control css based on the width of the container. Should suffice.
I'm new to designing web pages. I need to create a page that will have 2 sections.
The first section will have a logo on the top left corner. The second section will be in the middle of the page with some content generated by iframes.
I have put 2 div tags on the page: one for the image and another for content like this:
<div class="logo">
<a href="http://somelink.com/">
<img src=someimage.png'/></a>
</div>
<div class="content">
<iframe src="somepage.php></iframe>
</div>
How can I do it?
Than you
Try something like this:
Fiddle: http://jsfiddle.net/bjfxq/
Use CSS to position your elements. To learn more about styling, try this interactive tutorial:
http://www.codecademy.com/courses/css-coding-with-style/0/1
HTML
<div class="logo"><img src='http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png'/></div>
<div id="content"><iframe src="http://www.stackoverflow.com"></iframe></div>
CSS
#content {
text-align:center;
}
There are a million other ways to do this, but your question was basic, so my answer was basic.
CSS
.logo
{
float: left;
}
.content
{
text-align: center;
}
I'm using foundation 3 to build a responsive website but I want to have the Footer and Navigation background width to occupy the entire width? I have named my rows as
class="row navigation"
class="row footer"
I tried looking for how to fix this but I'm out of options. I'm assuming it is a small fix in the foundation.css file but it's a bit too overwhelming at the moment as I'm new to it.
Any poiinters much appreciated.
I ran into the same problem yesterday. The trick is, for full width spanning blocks, you just keep them out of the row/column structure, since row/column will always apply the default padding. Keep your footers and headers on their own, and use row/column inside them.
<header>
This will span the full width of the page
</header>
<div class="row">
<div class="twelve columns">
This text will flow within all typical padding and margins
</div>
</div>
<footer>
This will span the full width of the page
<div class="row">
<div class="twelve columns">
This text will flow within all typical padding and margins
</div>
</div>
</footer>
What I have been doing is to add a custom class so that I can chain it with .row and override the max-width setting.
<div class="row full-width"></div>
.row.full-width {
width: 100%;
max-width: 100%;
}
I put width in here too to cover bases, but it is already declared in foundation.css so you can just omit it.
If you're using Zurb Foundation Framework, simply remove the row class and wrap the element in a class container that is 100% width. Now you probably want to center the stuff, use class centered like this:
<div class="container navigation">
<div class="centered">
Some navigation stuff
</div>
</div>
I completely disagree with the answer. You shouldn't have to use !important
Please refer to my article and demo at http://edcharbeneau.github.com/FoundationSinglePageRWD/
You should be able to get what you need from there. The demo is for 2.2 but is very similar in function to v3.
Foundation 6 supports this feature naturally with row expanded. code example:
<div class="expanded row">
...
</div>
Read more here: http://foundation.zurb.com/sites/docs/grid.html#fluid-row
Use "Section" as in:
<section>
<div class="row">
<div class="small-12 columns">
</div>
</div>
</section>
Then, assign an ID to the section and use that for your background.
This is in regards to Foundation 5. None of the answers given so far, provide edge-to-edge, full widths. That's because inner .columns add padding.
For a true edge-to-edge, full width content, add this to your CSS.
.row.full { width: 100%; max-width: 100%; }
.row.full>.column:first-child,
.row.full>.columns:first-child { padding-left: 0; }
.row.full>.column:last-child,
.row.full>.columns:last-child { padding-right: 0; }
Simply add .full class to a .row you wish to extend full width.
<div class="row full">
<div class="medium-6 column">This column touches Left edge.</div>
<div class="medium-6 column">This column touches Right edge.</div>
</div>
Just override the max-width property as max-width: initial;, for example,
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
<div class="row fullWidth"> </div>
this works for me :)
I know that there are already many answers, but I think I have something new to add in this topic if someone is using Foundation 5 and stumbled upon this question (like me).
As Foundation is using REM units, it would be best to alter .row class using them and by adding extra class, so you can have only selected rows full-width. For example by using .full class:
.row.full {
max-width: 80rem; /* about 90rem should give you almost full screen width */
}
You can see that it is used like this even in documentation page of Zurb Foundation (they altered .row class, though): http://foundation.zurb.com/docs/ (just look into page source code)
You really would want to keep the row class otherwise you lose a lot of the power of the grid system. Why not change the setting for $rowWidth from 1000 (default) to 100%. This can be found in the file foundation_and_overrides.scss
Just set the
$row-width: 100%;
http://foundation.zurb.com/forum/posts/927-full-width-layouts
I am not sure if I am missing something, but I had to add a .row div for the .centered to work. I can still style the .header to have a full width background in this case, but the .container method did not work for me.
<header class="header">
<div class="row">
<div class="centered">
Logo and stuff
</div>
</div>
<div class="row">
Some navigation stuff
</div>
</header>
If you don't give it the "row" class and put columns inside it works on a 100% width
If you're using sass, this is a better way:
<div class="row full-width"></div>
.row{
&.full-width{
width: 100%;
max-width: 100%!important; //might be needded depending on your settings
&>.column:first-child,
&>.columns:first-child{
padding-left: 0;
}
&>.column:last-child,
&>.columns:last-child{
padding-right: 0;
}
}
}
yes, just use like this:
<div class="large-12 columns">
<h2>Header Twelve Columns (this will have full width of the BROWSER <---->></h2>
</div>
I have this html:
<div class="speaker-list">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">
Keith Anderson
</span>
</div>
<div class="views-field views-field-field-job-title">
<div class="field-content">VP, Digital Advisory</div>
</div>
<div class="views-field views-field-field-company">
<div class="field-content">RetailNet Group</div>
</div>
<div class="views-field views-field-title-1">
<span class="field-content">
Store of the Future
</span>
</div>
<div class="views-field views-field-field-headshot">
<div class="field-content">
<div id="file-53" class="file file-image file-image-jpeg contextual-links-region">
<div class="content">
<img typeof="foaf:Image" src="/kanderson.jpg" width="180" height="180" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It's dynamically generated by a Drupal view, so I can't change the output html at all. I need to work with what is here. Here's the desired result:
Without any styling on the headshot, this is what it looks like:
I tried to style the image to force it to float to the left of the text:
.view-speaker-list div.view-content div.views-row div.views-field
div.field-content div.file-image div.content img {
border: 1px solid #666;
float: left;
position: relative; /* tried with and without position (inc. absolute) */
left: 30px;
}
Obviously I'm doing something wrong, because this is what I get (with relative position):
and with absolute position:
I've also tried putting the float on the "uppermost" div class that holds the image, with no position on the div:
.view-speaker-list div.view-content div.views-row
div.views-field-field-headshot {
float: left;
}
It gives the same result as the position: relative screenshot.
Where am I going wrong? If I had control over the html I'd do it differently, but I'm not sure how to deal with all of these nested divs.
EDITED TO ADD NEW SCREENSHOT FOR #WEX
Here's what it looks like when I tried to use your code with the html reordered - http://jsfiddle.net/mPa7z/
I'll try to explain the "right" way to use float so that you can see why your way didn't work.
In your post, you try to apply float: left to the <div> surrounding your image, but that technique only works when the element you are floating is above all the elements you want to wrap around it. That "may" solve your problem, but that technique has it's pitfalls if you're trying to use it to create two distinct columns - if the text on the right is taller than the floated element, the text on the right will wrap below it. So then you have to add another container around your non-floated elements to ensure that it won't wrap. This solves your problem, but doesn't really help if you can't even edit your markup!
I'd argue that the technique I've posted below works better, and solves your problem: http://jsfiddle.net/Wexcode/AQQwX/
.view-content {
position: relative;
min-height: 180px;
padding: 0 0 0 180px; }
.views-row { padding: 20px 0 0 20px; }
.views-field-field-headshot {
position: absolute;
top: 0;
left: 0; }
If you have access to the View itself in Drupal, you can reorder the elements. When logged into Drupal, open the View (in Drupal 7: Structure > Views > Viewname), look for "Fields" and click on the triangle next to "add", which will have a popup, then click "rearrange". You can then drag the photo field to be the first item in the View, then adjust your CSS to float the image to the left.
EmmyS,
Instead of trying to get the headshot to float:left, have you considered making the others float:right? This will give the impression that the image is floating left without having to change the markup in any way.
div.speaker-list div.views-row > div.views-field {
float:right;
clear:both;
}
div.speaker-list div.views-row > div.views-field.views-field-field-headshot {
float:none;
clear:none;
}
The above CSS should work with that specific configuration without altering any of your other Drupal generated markup. In order to make sure that other CSS does not interfere, I've applied as much specificity as possible. Since the headshot will be back in the containing <div>, you shouldn't need to alter the size of it unless the store is simply too large (I don't know without looking at your data). Finally the CSS is concise, so you can add any additional styling you need on a per-element basis.
Hope this helps,
FuzzicalLogic
When you can drop somewhere else on the page some code, you can gain control over the HTML by using jQuery. Then you could make modifications to the DOM tree.
But I do not understand why you can not edit the HTML. Isn't Drupal open source? You should be able to find the file using FTP and manipulate it.