PHP nth-child in media queries - php

On MyPage are many pictures. In the normal case are 6 pictures in one row. If you change the size of the browser the number of pictures in each row will change. I solved this problem with media queries. In each row the last picture shouldnt get a margin-right: 5px;. But the nth-child wont change its every time the same, thats why the margin isnt correct. What did i wrong?
Here is my php output for the images:
<?php
$sql = "SELECT * FROM bilder";
$result=mysqli_query($db,$sql);
while($row=mysqli_fetch_assoc($result)){
echo "<img class='image' src='$row[bild_pfad]' alt='$row[bild_name]' style='$row[bild_werte]'>";
}
?>
Here is the css:
section{
margin: 0px auto;
width: 925px;
margin-top: 55px;
}
.image{
object-position: center; /* Center the image within the element */
height: 150px;
width: 150px;
object-fit: cover;
margin-right: 5px;
}
.image-margin{
margin-right: 5px;
}
section img:nth-child(6n+6){
margin-right:0;
}
#media only screen and (max-width : 924px) {
/* Five images in each row */
section{
margin: 0px auto;
width: 770px;
margin-top: 55px;
}
section img:nth-child(5n+5){
margin-right:0;
}
}
#media only screen and (max-width : 770px) {
/* Four images in each row */
section{
margin: 0px auto;
width: 615px;
margin-top: 55px;
}
section img:nth-child(4n+4){
margin-right:0;
}
}
#media only screen and (max-width : 615px) {
section{
margin: 0px auto;
width: 460px;
margin-top: 55px;
}
section img:nth-child(3n+3){
margin-right:0;
}
}
#media only screen and (max-width : 460px) {
section{
margin: 0px auto;
width: 305px;
margin-top: 55px;
}
section img:nth-child(2n+2){
margin-right:0;
}
}

I solved my problem. I had to reset the old nth-child code
like this:
section img:nth-child(6n+6){
margin-right:0;
}
#media only screen and (max-width : 924px) {
/* Five images in each row */
section{
margin: 0px auto;
width: 770px;
margin-top: 55px;
}
section img:nth-child(6n+6){
margin-right:5px;
}
section img:nth-child(5n+5){
margin-right:0;
}
}

Related

How to make wordpress widget container full width

I built a plugin to display a full page tab after you call the shortcode.
This is how it looks when I run it.
When I installed it however this is how it looks
As you can see not only is the tab not a full page, the tabs stylesheet has managed to affect the entire site and disorganized it.
I want to make the tab full width(from one end of the page to another) and I want the style for the plugin to only affect the slider returned by the plugin.
I use elementor page builder and I've tried setting the elementor container's margin to 0. It reduced the space but it's still not enough as you can see from the image. My site's layout is already set to 100% full-width. I would appreciate any help I can get.
Here's the CSS for the plugin below.
.elementor-container {
margin: 0px !important;
}
.bs-example {
margin-top: 20px;
margin-bottom: 20px;
}
.hide23 {
border-style: none !important;
}
.tab-pane {
margin: 20px;
}
.selected {
border-bottom: 2px solid #FF7F50;
}
#media screen and (min-device-width: 300px) {
.tab-content {
width: 50% !important;
}
}
#media screen and (max-width: 800px) {
/* li {width:50%;}*/
ul {
display: none !important;
}
}
#media all and (max-width: 959px) {
.elementor-container {
max-width: 100% !important;
}
.elementor-column-gap-default {
max-width: 100% !important;
}
}
h3 {
font-size: 2vw;
color: black;
}
a {
background-color: #fff !important;
}
ul:hover {
color: transparent!important;
}
ul {
border-style: none !important;
/*border-bottom: 2px solid #FF7F50 !important;*/
}
{
display: inline !important;
color: black;
}
.span-active {
border: 2px solid #FF7F50;
border-radius: 100%;
font-size: 15px;
padding-right: 5px;
padding-left: 5px;
margin-right: 5px;
margin-left: 5px;
margin-top: -5px;
color: white;
background-color: #FF7F50;
}
.span-inactive {
border: 2px solid grey;
border-radius: 100%;
font-size: 15px;
padding-right: 5px;
padding-left: 5px;
margin-right: 5px;
margin-left: 5px;
margin-top: -5px;
color: grey !important;
background-color: white;
}
.inactive {
color: grey !important;
}
.progress-bar {
background-color: #FF7F50;
}
Let me know if you need anything else. I apologize if the answer is obvious. I'm new to WordPress development

css link not being recognized

Here is a strange one. At least for me anyway. I have an HTML page that is being generated by PHP with a style sheet (css.php) linked in. My original plan was to be able to save the attributes for this file in a MySQL database and then load values into the file using PHP variables at each page load. I was talked out of this because it would use to many server resources to parse this file on each page load. I decided to rewrite this file each time changes were made to the database. Now that I have written a file with preferences.php and changed its name to css.css it no longer sees the correct file. It only sees a one line file that I wrote while initially setting up my code. Now that I have a full file it still uses the one-liner that no longer exists. If I change back to my .php file that is in the same folder (the only difference between the two is the file extension) everything works correctly? Where have I gone wrong? I'm sure it's something simple that I can't see.
here is index.html that is loading the css file
<!doctype html>
<html lang= "en">
<head>
<title>Rogers Enterprises</title>
<link rel= "icon" type= "image/png" href= "images/bc2.JPG">
<meta charset="utf-8">
<link rel="stylesheet" href= "css/css.css" >
<script src="js/js.js"></script>
</head>
and here is my css.css
body { background: linear-gradient(to top right, #ffff00 0%, #000000 100%);
color: #ddd8e4; }
h1 { color: red;
text-align: center; }
div { /*border: 1px solid black; */
padding: 1%;
float: left; }
p.content { text-indent: 2%; }
p.content::first-letter { font-size: 200%;
font-weight: bold;
color: black }
#logo { width: 98%; }
.box { width: 10%; }
#links { width: 100%; }
#desc { width: 86%; }
#footer { width: 98%;
background-color: #104e01;
display: block;
text-align: center; }
.footer { width: 31.33%; }
#login {opacity: 0.2; }
#login-form { max-width: 100%;
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left; }
input { border-radius: 5px;
max-width: 25vw; }
img { max-width: 100%;
max-height: 100%; }
/* styles for smart phone */
#media only screen and (min-width: 302px) and (max-width: 640px) {
.box{ position: relative;
width: 98%; } /* desired width */
.box:before{ content: "";
display: block;
padding-top: 16.66666666%; } /*What you want the height to be in relation to the width */
.box-content{ position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
#desc { width: 98%; }
}
#media only screen and (min-width: 0px) and (max-width: 370px) {
#remember_me_label { font-size: 4vw; }
}
/* styles for tablet */
#media only screen and (min-width: 768px) and (max-width: 980px) { /* styles for tablet */
}
This is preferences.php that generates the CSS
$file = fopen("../css/css.css", "w");
$txt = 'body { background: linear-gradient(to top right, #ffff00 0%, #000000 100%);
color: #ddd8e4; }
h1 { color: red;
text-align: center; }
div { /*border: 1px solid black; */
padding: 1%;
float: left; }
p.content { text-indent: 2%; }
p.content::first-letter { font-size: 200%;
font-weight: bold;
color: black }
#logo { width: 98%; }
.box { width: 10%; }
#links { width: 100%; }
#desc { width: 86%; }
#footer { width: 98%;
background-color: #104e01;
display: block;
text-align: center; }
.footer { width: 31.33%; }
#login {opacity: 0.2; }
#login-form { max-width: 100%;
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left; }
input { border-radius: 5px;
max-width: 25vw; }
img { max-width: 100%;
max-height: 100%; }
/* styles for smart phone */
#media only screen and (min-width: 302px) and (max-width: 640px) {
.box{ position: relative;
width: 98%; } /* desired width */
.box:before{ content: "";
display: block;
padding-top: 16.66666666%; } /*What you want the height to be in relation to the width */
.box-content{ position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
#desc { width: 98%; }
}
#media only screen and (min-width: 0px) and (max-width: 370px) {
#remember_me_label { font-size: 4vw; }
}
/* styles for tablet */
#media only screen and (min-width: 768px) and (max-width: 980px) { /* styles for tablet */
}';
fwrite($file, $txt);
fclose($file);
My directory structure looks like this
rogersproperties
|___index.html
|___css
| |___css.php
| |___css.css
|___php
|___preferences.php

How to center copyrights text in subfooter?

I'm using wordpress and the theme is Newspaper. I want to center the copyrights text but I don't know how. I have checked the theme panel settings and there's no options to edit that.
Theme panel pic:
I have gone through some answers in the web and they suggested adding codes in the editor but I'm not sure if it's the footer.php or style.css. If the latter, I managed to find the part regarding sub-footer:
Sub Footer
*/
.td-sub-footer-container {
background-color: #0d0d0d;
color: #ccc;
font-size: 12px;
font-family: 'Open Sans', arial, sans-serif;
/* responsive portrait phone */
}
#media (max-width: 767px) {
.td-sub-footer-container {
text-align: center;
padding: 6px 0;
}
}
.td-sub-footer-copy {
line-height: 18px;
margin-top: 8px;
margin-bottom: 8px;
}
/* Sub Footer Menu */
.td-sub-footer-container .td-sub-footer-menu {
float: right;
/* responsive portrait phone */
}
#media (max-width: 767px) {
.td-sub-footer-container .td-sub-footer-menu {
float: none;
}
}
.td-subfooter-menu {
display: inline-block;
margin: 0;
float: right;
/* responsive landscape tablet */
/* responsive landscape tablet */
/* responsive portrait tablet */
/* responsive portrait phone */
}
#media (min-width: 1019px) and (max-width: 1140px) {
.td-subfooter-menu {
padding-right: 40px;
}
}
#media (min-width: 768px) and (max-width: 1018px) {
.td-subfooter-menu {
padding-right: 48px;
}
}
#media (max-width: 767px) {
.td-subfooter-menu {
float: none;
}
}
.td-subfooter-menu li {
display: inline-block;
margin-left: 0;
}
.td-subfooter-menu li a {
margin-right: 16px;
line-height: 34px;
display: inline-block;
color: #ccc;
}
.td-subfooter-menu li a:hover {
color: #4db2ec;
}
.td-subfooter-menu li:last-child a {
margin-right: 0;
}
.td-subfooter-menu ul {
display: none;
}
Thank you for such depth! Here's some CSS you need to add:
.td-pb-span5.td-sub-footer-copy {
float: none;
text-align: center;
margin:0 auto;
}
The reason why you need this is because your subfooter is following some rules that are already established for the rest of your page:
.td-pb-row [class*="td-pb-span"] {
display: block;
min-height: 1px;
float: left;
padding-right: 24px;
padding-left: 24px;
position: relative;
}
Simply removing the immediately above CSS will 'break' the rest of your page's layout.
Edit, to answer comment question:
Apologies, here's a bit more information:
When CSS is being applied to an element that is already being styled by a different selector's rules, there's a calculation of specificity. The CSS I've given you will be fine on its own if added, however, if you'd like to add it to the selector you already have, .sub-footer-copy, then you'd have to add !important to override your already written CSS, like so:
td.sub-footer-copy{
float: none !important;
text-align: center;
margin: 0 auto;
}
This is because the selector .td-pb-row [class*="td-pb-span"] is more specific than the selector .sub-footer-copy. Here's some further reading on this:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Also, I'd like to note that the selector .td-pb-row [class*="td-pb-span"] is an attribute selector referring to a CSS class, so it is similar to .td-pb-row .td-pb-span

Where is this top margin coming from on my Wordpress website

So I am using the Twenty Twelve theme that I have customized. I need to remove the top margin above the header menu. See here http://blog.littlenomads.com/
In my child style sheet I have added:
.site-header {
padding: 0px 0 !important;
margin: 0px 0 !important;
}
/* remove site margin */
body .site{margin:0 !important;max-width: 100% !important;}
.site-content {
margin-top: 0px;
}
I found that solution here: https://wordpress.stackexchange.com/questions/85414/twenty-twelve-theme-remove-margins
I also fully commented out, in the theme Twenty Twelve stylesheet:
/* Minimum width of 960 pixels. */
#media screen and (min-width: 960px) {
body {
background-color: #e6e6e6;
}
/*Brian Ogden 8-12-2014*/
/*body .site {
padding: 0 40px;
padding: 0 2.857142857rem;
margin-top: 48px;
margin-top: 3.428571429rem;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}*/
body.custom-background-empty {
background-color: #fff;
}
body.custom-background-empty .site,
body.custom-background-white .site {
padding: 0;
margin-top: 0;
margin-bottom: 0;
box-shadow: none;
}
}
* Minimum width of 600 pixels. */
#media screen and (min-width: 600px) {
.author-avatar {
float: left;
margin-top: 8px;
margin-top: 0.571428571rem;
}
.author-description {
float: right;
width: 80%;
}
/*.site {
margin: 0 auto;
max-width: 960px;
max-width: 68.571428571rem;
overflow: hidden;
}*/
I have also tried the solution found here: http://wordpress.org/support/topic/removing-page-title-and-white-space-from-twenty-twelve-theme
I'm guessing you're logged into your site and it's the wp-admin bar shifting the html/body (html { margin-top: 32px !important; } etc .. ) down with the !important styles that get fed into the head when you're logged in?

Centre an Image

I'm trying to horizontally center an image. However it does not move from the left side of the page. This answer does not work in my case. What am I doing wrong?
#container {
width: 100%;
border: 2px yellow dashed;
height: 100px;
}
#profile-image img{
margin-left: auto;
margin-right: auto;
border: 2px orange solid;
}
mypage:
<div id="container">
<div id="profile-image">
<p><img src="<?php echo $data['profile_image_url'];?>" alt="me"></p>
</div>
to make any div or anything horizontally at center , common css approach will be,lets have a width and declare margin:0 auto;
#profile-image{
width:400px;
margin:0 auto;
}
Try this: http://jsfiddle.net/rua4d/2/
#container {
width: 300px;
border: 2px yellow dashed;
height: 100px;
display:table-cell;
position:relative;
vertical-align:middle;
}
#profile-image img{
margin-left: auto;
margin-right: auto;
border: 2px orange solid;
display:block;
position:relative;
vertical-align:middle;
text-align:center;
width:50px;
}
You just need to add display:block to your image's style. Images are inline elements, and inline elements ignore margins.
why cant this work?
#profile-image p { text-align: center; }
#profile-image img { display: inline; }
that way you won't need to specify the width.. if you want margins to work together with the text-align: center you would need inline-block instead:
#profile-image p { text-align: center; }
#profile-image img { display: inline-block; }

Categories