Ok so this may be a very simple/obvious question, so I apologize if its a dumb question but didnt know where else to ask. But when using CSS and media queries for a responsive layout, should I re-use CSS code inside the media queries? For example:
h1 {
font-size:14px;
margin:0;
padding:0;
}
#media (min-width:768px) {
h1 {
font-size:12px;
margin:0;
padding:0;
}
}
Or is this the proper method?
h1 {
font-size:14px;
margin:0;
padding:0;
}
#media (min-width:768px) {
h1 {
font-size:12px;
}
}
And with grouping css properties with regards to breakpoints. Should I group all CSS properties for each breakpoint? Or just do it as needed? For example:
First method
h1 {
font-size:14px;
margin:0;
padding:0;
}
h2 {
font-size:12px;
margin:0;
padding:0;
}
#media (min-width:768px) {
h1 {
font-size:12px;
margin:0;
padding:0;
}
h1 {
font-size:10px;
margin:0;
padding:0;
}
}
//Other CSS properties for this page/site
#page-footer .footer-bot {
background-color:#24262b;
font-family:'PT Sans',sans-serif;
font-weight:400;
text-transform:uppercase;
font-size:10px;
color:#adadad;
letter-spacing:.3px;
line-height:18px;
padding-top:5px;
padding-bottom:5px;
}
#media (min-width:768px) {
#page-footer .footer-bot {
line-height:25px;
padding-top:0;
padding-bottom:0;
}
}
Or in the second method, wait till the end of the CSS script and do all the breakpoint changes at the very end in one group for each breakpoint I want to use?
h1 {
font-size:14px;
margin:0;
padding:0;
}
h2 {
font-size:12px;
margin:0;
padding:0;
}
#page-footer .footer-bot {
background-color:#24262b;
font-family:'PT Sans',sans-serif;
font-weight:400;
text-transform:uppercase;
font-size:10px;
color:#adadad;
letter-spacing:.3px;
line-height:18px;
padding-top:5px;
padding-bottom:5px;
}
//Other CSS properties for this page/site
#media (min-width:768px) {
h1 {
font-size:12px;
margin:0;
padding:0;
}
h1 {
font-size:10px;
margin:0;
padding:0;
}
#page-footer .footer-bot {
line-height:25px;
padding-top:0;
padding-bottom:0;
}
}
This is the right method to use media query breakpoints.
h1 {
font-size:14px;
margin:0;
padding:0;
}
#media (min-width:768px) {
h1 {
font-size:12px;
}
}
Only add that code which you want to make changes in breakpoints. No need to repeat same code in media query.
About grouping CSS you can use both the method. If you have used First method your code will be so long. So, my suggestion is you should go for second method
Related
I have a stylesheet for when #media screen and (max-width:639px)
When it is above 639px, it refers to my default CSS code which is what I want. But there are two elements I want to hide when the screen is below 667px.
In other words, when the screen is between 639px and 667px, I want the default CSS to show with two elements removed from it using .class{display:none}.
I tried min-width:666px, max-width:667px and several other variations but I can't get it to work.
Here's my blog:
Here's my css file: Link
body {
background-color:#CEDEAF;
color:#111530;
font-size:16px;
overflow-y:scroll;
margin:auto;
font-family:'Noto Sans', Arial, sans-serif;
line-height:2;
letter-spacing:1px
}
img, iframe {
border:none;
max-height:100%;
max-width:100%;
display:inline-block;
vertical-align:top;
padding:.75%
}
header {
text-align:center
}
a {
text-decoration:none;
color:#C33125
}
a:hover {
text-decoration:none;
color:#111530
}
h1, footer a {
color:#111530
}
footer a:hover {
color:#C33125
}
a:hover img {
opacity:.8
}
hr {
border:none;
height:1px;
background-color:#ddd
}
header img {
position:relative;
padding:0;
margin:auto;
nopin:nopin
}
.follow {
position:absolute;
top:.5%;
right:0;
margin-right:3%
}
#main {
margin:0 auto;
background-color:#fff;
width:95%
}
#Blog1 {
padding:1%
}
h1 {
margin:0;
font-size:1.3em;
text-transform:uppercase;
text-align:center;
margin-bottom:1%
}
.homelist {
text-align:center;
margin-top:-.75%
}
.homelist img {
width:30%
}
.left img {
float:left;
margin-right:20px
}
.center, .videopost, .breadcrumb, footer {
display:block;
text-align:center
}
.videopost img {
width:1px;
position:absolute
}
ul {
list-style-position:inside
}
.staticpagelist ul, .imagetextlist ul {
margin-left:-40px
}
.staticpagelist ul li, .imagetextlist ul li {
display:inline-block;
text-decoration:none;
padding:1.5%;
text-align:center;
vertical-align:top;
font-size:.8em;
width:30%
}
.staticpagelist ul li {
font-size:.85em;
font-weight:700
}
.sub {
margin:1% auto;
font-weight:700;
text-transform:uppercase;
padding:.75%;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd
}
.hcard, .hcard a {
color:#aaa
}
.hcard, footer {
font-size:.7em;
font-weight:700
}
.breadcrumb {
font-size:.8em
}
.menu {
text-align:center;
font-weight:700;
padding-bottom:.5%
}
.related-posts-widget ul {
height:250px;
overflow:hidden
}
.related-posts-widget ul li {
width:13%
}
footer {
margin:1%
}
#media screen and (max-width:639px) {
h1, .sub {
font-size:.9em
}
header img, .homelist img, iframe {
width:90%
}
#main {
width:98%
}
.mobilesquish img, .staticpagelist ul li {
width:47%
}
.breadcrumb {
margin-bottom:2%
}
.follow, .related-posts-widget, .hcard, .remove {
display:none
}
}
Try this
#media screen and (min-width: 639px) and (max-width: 667px) {
//css here display: none
}
use following code
#media screen and (min-width: 639px) and (max-width: 667px) {
//css here display: none
}
#media screen and (max-width: 639px){
//write Css for screen less than 639px
}
I'm using a Wordpress theme with a MLS search box however the search box is too large for my client and they want us to reduce the size of this entire search box. I've been playing with it but to no avail. Any suggestions?
Site is http://shouldirentorbuyahome.com/
}
/*-------------------------------------
4.3 Advance Search
-------------------------------------*/
.advance-search-block { background:#F2F2F2; padding:5px 0 10px; position:relative; }
.advance-search-block label { display:block; font-weight:200; font-size:12px; color:#384042; margin-bottom:10px; }
.advance-search-block ul { width: 80%; }
.advance-search-block ul li { float:left; margin-right:15px; margin-bottom:15px; }
.advance-search-block input[type='text'] { font-size:10px; color:#777; padding:8px 8px 9px; width:75px; border:1px solid #E1E1E1; }
.advance-search-block select.small, .advance-search-block a.small { width:150px !important; }
.advance-search-block input[type='submit'] { background:#445064; color:#FFF; padding:8px 11px; font-size:12px; font-weight:200; cursor:pointer; }
.advance-search-block input[type='submit']:hover { background:#344053; }
.search-title { position:absolute; top:0px; }
.search-title h4 { background:#445064; padding:18px 25px; font-size:12px; font-weight:200; float:left; color:#FFF; margin-bottom:0; }
.search-title span { float:left; display:block; background:#88C354; color:#FFF; font-size:12px; padding:18px 20px; }
.advance-search-block.advance-search-block-page { background:none; padding:0; margin-top:-200px; }
.advance-search-block.advance-search-block-page .inside { background:#dcecce; background:rgba(220,236,206,0.8); padding:30px 30px 0; width:1020px; }
.advance-search-block.advance-search-block-page ul li { margin-right:15px; }
.advance-search-block.advance-search-block-page input[type="text"] { width:150px; }
.advance-search-block.advance-search-block-page .search-title { position:relative; top:0; }
.advance-search-block.advance-search-block-page .search-title h4 { background:none; padding:0; font-size:12px; color:#384042; }
.advance-search-block.advance-search-block-page .search-title span {
background:#445064; padding:4px 8px; margin-right:15px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%;
}
You have
.advance-search-block.advance-search-block-page input[type="text"] { width:150px; }
Can't you just change the width of this element to something not as wide?
Suggest
.advance-search-block.advance-search-block-page input[type="text"] { width:60%; }
Give that a shot and I'm sure you know in wordpress you will need to manually update your styles.css.
If i'm not wrong you are talking about that blue button?
Your blue submit button has a div and it has a class 'dsidx-search-button search-form' with width of 1020px !important , reduce it to 250px !important as per your requirement.
I am looking for a way to highlight the chosen page number in pagination using css,
or to make the chosen page number bold.
the pagination php code works fine so I think I should modify the css page.
what should I add here:
body
{
padding:50px;
font-size:0.85em;
font-family:arial;
}
a
{
text-decoration:none;
color:#0080ff;
}
a:hover
{
text-decoration:underline;
}
.info
{
line-height:150%;
width:650px;
overflow:auto;
margin-top:30px;
color:#555555;
}
.msg
{
padding:10px;
border-bottom:dashed 1px #5d478b;
width:450px;
margin-bottom:15px;
}
#pages
{
clear:both;
list-style-type:none;
overflow:hidden;
margin:0;
padding:0;
}
#pages li
{
float:left;
}
#pages li a
{
font-weight:bold;
margin:0 4px;
padding:5px 10px;
border:1px solid #bbb;
display:inline-block;
border-radius:5px;
}
#pages li a:hover
{
text-decoration:none;
color:#ff0080;
}
You are missing information in your post about the html produced for the pagination.
I presume from your CSS that each page link is an anchor within a list item within an element with the id pages. I'm going to assume that the selected anchor has some sort of class on it, let's say "selected". Add something like this to your css:
#pages li a.selected
{
font-weight: bold;
background-color: yellow;
}
This is my CSS:
/* Navigation Bar */
#linkBar
{
position: relative;
overflow: hidden;
height:24px;
width:999px;
background:#990033;
}
.linkbar ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.linkbar li
{
float:left;
}
.linkbar a:link,a:visited
{
font-size: 14px;
display:block;
width:134px;
font-weight:bold;
color:#FFFFFF;
background-color:#990033;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.linkbar a:hover,a:active
{
background-color:#000000;
}
/* Links */
a:link,a:visited,a:active
{
font-size: 8pt;
font-weight:bold;
color:#990033;
text-decoration:underline;
}
a:hover
{
color:#0000FF;
text-decoration:none;
}
My expected outcome is that links show like:
Which is the case for most of the elements, however the first link on the linkbar ends up like:
Linkbar code:
<div id="linkBar" class="linkbar">
<ul>
<li>Home</li>
<li>Course</li>
<li>Help</li>
</ul>
</div>
I've made a jsfiddle for this
(on jsfiddle i dont get the problem with the first link in the linkbar, so this implies its a problem with the rest of my code?).
I can solve the issue with the navbar if i just change the css around to be:
#linkBar
{
position: relative;
overflow: hidden;
height:24px;
width:999px;
background:#990033;
}
/* Links */
a:link,a:visited,a:active
{
font-size: 8pt;
font-weight:bold;
color:#990033;
text-decoration:underline;
}
a:hover
{
color:#0000FF;
text-decoration:none;
}
/* Navigation Bar */
.linkbar ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.linkbar li
{
float:left;
}
.linkbar a:link,a:visited
{
font-size: 14px;
display:block;
width:134px;
font-weight:bold;
color:#FFFFFF;
background-color:#990033;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.linkbar a:hover,a:active
{
background-color:#000000;
}
But this then means that the visited normal links text color is white - which is not what I want (as some normal links are on light or white backgrounds).
I've made a jsfiddle for this (visited links being white).
Can anyone see what I'm doing wrong / point me in the direction of how to fix it?
Where you have written .linkbar a:link,a:visited you need to repeat the classname before a:visited
Right now you are actually saying '.linkbar link, and then override all a:visited'
So it should be .linkbar a:link, .linkbar a:visited { .. }
im trying to streamline my css creation by using LESS. so far so good, however I came accross a problem, my code looks like so:
#content {
h1 {
font-size:20px;
}
h2 {
font-size:10px;
}
}
now i also want to apply font-weight:normal; to both the h1 and h2, how would i do this without having it in every rule?
h1, h2
{
font-weight:normal;
}
Try Like this
#content {
h1 {
font-size:20px;
}
h2 {
font-size:10px;
}
h1, h2
{
font-weight:normal;
}
}
#content {
font-weight:normal;
h1 {
font-size:20px;
}
h2 {
font-size:10px;
}
}
Sometimes it helps. Not in all situations actually.