I am trying to make my full wrapper clickable, For example, if they click on the white rectangle or the excerpt. For now, only the picture and title lead to the article.
Ideally, the listing item would have the same link as title and picture.
An example : https://dm-gaming.eu/pepites-autres/
My CSS:
.display-posts-listing .listing-item {
box-shadow: 1px 1px 0px 0px #dedede;
background-color: #fff;
}
/Pages de jeu/
.display-posts-listing.jeu .title {
position: absolute !important;
margin-right: 10px;
margin-left: 3px;
margin-top: 0.2%;
color: #111111;
font-weight: bold;
font-size: 15px;
}
.display-posts-listing.jeu .excerpt {
position: absolute !important;
margin-right: 10px;
margin-left: 3px;
margin-top: 2.6%;
color: #111111;
}
.display-posts-listing.jeu .comments-link {
position: absolute !important;
margin-left: 250px;
margin-top: 45px;}
.display-posts-listing.jeu .title {
position: absolute !important;
margin-right: 8px;
margin-left: 3px; }
.display-posts-listing.jeu .category-display {
position: absolute !important;
margin-left: 75px;
margin-top: 47px;
font-size: 12px;}
.display-posts-listing.jeu .category-display {
color: #fff; }
.display-posts-listing.jeu .category-display a {
text-transform: none;
border: solid 1px #aeaeae;
border-radius: 5px;
padding-left: 2px;
padding-right: 2px;
color: #030e4b;}
.display-posts-listing.jeu .date {
color: #808080;
position: absolute;
margin-top: 47.9px;
text-align: center;
margin-left: 0.3%;
font-size: 12px;
}
#media screen and (max-width: 1150px)
{.display-posts-listing.jeu .category-display {
display: none !important;}}
#media screen and (max-width: 1150px)
{.display-posts-listing.jeu .title {
margin-top: 1px !important;}
}
#media screen and (max-width: 1150px)
{.display-posts-listing.jeu .excerpt {
margin-top: 0.8% !important;}
}
#media screen and (max-width: 1150px)
{.display-posts-listing.jeu .excerpt {
margin-top: 0.8% !important;}
}
My page code exemple
[display-posts post_type=”page” image_size="thumb" taxonomy="category" tax_term="broforce" tax_operator="AND" wrapper="div" wrapper_class="display-posts-listing jeu" posts_per_page=10 meta_key="_thumbnail_id" category_display="post_tag" category_label="" include_date="true" date_format="d/m/Y" include_excerpt="true" include_excerpt_dash="false" category_display="true"]
Page html code :
view-source:https://dm-gaming.eu/pepites-autres/
I would like the class "listing-items" to be clickable everywhere, not just the title or the picture
<div class="vc_separator wpb_content_element vc_separator_align_center vc_sep_width_100 vc_sep_pos_align_left vc_separator_no_text vc_custom_1674482909819 vc_custom_1674482909819"><span class="vc_sep_holder vc_sep_holder_l"><span style="border-color:#111111;" class="vc_sep_line"></span></span><span class="vc_sep_holder vc_sep_holder_r"><span style="border-color:#111111;" class="vc_sep_line"></span></span>
</div></div></div></div></div><div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element vc_custom_1673538964140">
<div class="wpb_wrapper">
<p style="text-align: center;"></p><div class="display-posts-listing jeu"><div class="listing-item"><a class="image" href="https://dm-gaming.eu/pepites-autres/multiversus-ujess-31/"><img width="125" height="70" src="https://dm-gaming.eu/wp-content/uploads/2022/08/Multiversus-le-nouveau-Super-Smash-Bros-decouvrez-le-en-60-secondes-e1659691382245.jpg" class="attachment-thumb size-thumb wp-post-image" alt="Multiversus, le nouveau Super Smash Bros ? Découvrez le en 60 secondes" loading="lazy" srcset="https://dm-gaming.eu/wp-content/uploads/2022/08/Multiversus-le-nouveau-Super-Smash-Bros-decouvrez-le-en-60-secondes-e1659691382245.jpg 800w, https://dm-gaming.eu/wp-content/uploads/2022/08/Multiversus-le-nouveau-Super-Smash-Bros-decouvrez-le-en-60-secondes-e1659691382245-300x169.jpg 300w, https://dm-gaming.eu/wp-content/uploads/2022/08/Multiversus-le-nouveau-Super-Smash-Bros-decouvrez-le-en-60-secondes-e1659691382245-125x70.jpg 125w, https://dm-gaming.eu/wp-content/uploads/2022/08/Multiversus-le-nouveau-Super-Smash-Bros-decouvrez-le-en-60-secondes-e1659691382245-768x432.jpg 768w, https://dm-gaming.eu/wp-content/uploads/2022/08/Multiversus-le-nouveau-Super-Smash-Bros-decouvrez-le-en-60-secondes-e1659691382245-24x14.jpg 24w, https://dm-gaming.eu/wp-content/uploads/2022/08/Multiversus-le-nouveau-Super-Smash-Bros-decouvrez-le-en-60-secondes-e1659691382245-36x20.jpg 36w, https://dm-gaming.eu/wp-content/uploads/2022/08/Multiversus-le-nouveau-Super-Smash-Bros-decouvrez-le-en-60-secondes-e1659691382245-48x27.jpg 48w" sizes="(max-width: 125px) 100vw, 125px"/></a> <a class="title" href="https://dm-gaming.eu/pepites-autres/multiversus-ujess-31/">MultiVersus 60 SECS #31</a> <span class="date">08/08/2022</span> <span class="category-display"><span class="category-display-label"></span> MultiVersus, Un Jeu En 60 Secondes</span> <span class="excerpt">Le concurrent à Super Smash Bros en incarnant Superman ou Bugs Bunny !</span></div></div>
</div>
</div>
Related
I tried everything in the stack overflow.
I use microsoft edge and I updated it.
I tried adding !important
I tried putting #media{} after all the background-color declarations.
But the supposed background color is not being displayed after I resize and make the screen smaller or the make the browser window smaller!
It should display tomato color when resized, but instead it displays white background-color.
#hakkimda {
padding-top: 30px;
/*clear: both; float left ve
float right varsa buna etkiyen
onları iptal etmek için*/
height: 330px;
background-color: tomato;
color: black;
}
#media screen and (max-width:992px) and (min-width: 0px){
.medyalarim1 {
width: 100%;
}
#hakkimda img{
margin-top:30px;
}
#hakkimda{
background-color: tomato !important;
}
}
<div id="hakkimda">
<img src="../../eyeTers.jpg" alt="">
<p>Coherent Games
Böbreküstü bezlerinizi patlatır. Size adrenalin kusturur.
</p>
</div>
Here is the larger part of the code:
#hakkimda {
padding-top: 30px;
/*clear: both; float left ve
float right varsa buna etkiyen
onları iptal etmek için*/
height: 330px;
background-color: tomato;
color: black;
}
#hakkimda img {
border: 5px dashed grey;
}
#hakkimda p {
white-space: pre-line;
text-transform: capitalize;
}
/* #hakkimda p span{
font-size: larger;
font-weight: bold;
} */
#hakkimda p::first-line {
font-weight: bold;
text-decoration: underline;
font-size: 30px;
letter-spacing: 3px;
}
#media screen and (max-width:992px) and (min-width: 0px){
.medyalarim1 {
width: 100%;
}
#hakkimda img{
margin-top:30px;
}
#hakkimda{
background-color: tomato !important;
}
}
</style>
</head>
<body>
<div id="coherentgames">
<span class="coherentgamesyazi">
Coherent Games Korku Oyunları Tasarlar
</span>
</div>
<div class="medyalarim">
<div class="medyalarim1">Konusu apartman dairesinde geçer.
<p>Kapalı ortamda en iyi korku oyunu</p>
</div>
<div class="medyalarim1">Konusu ötanazi'dir.
<p>Kasaba ortamında geçen oyundur.</p>
</div>
<div class="medyalarim1">Konusu antolojik korkudur.
<p>Hikayeler her türlü ortamda geçmektedir.</p>
</div>
</div>
<div id="hakkimda">
<img src="../../eyeTers.jpg" alt="">
<p>Coherent Games
Böbreküstü bezlerinizi patlatır. Size adrenalin kusturur.
</p>
</div>
</body>
</html>
Where is the problem?
as #A Haworth requested here s the complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
}
div {
width: 100%;
height: 300px;
text-align: center;
color: orangered;
}
#coherentgames {
/*bu 3 yazı tipi benzer yazı tipleri 3. tip tüm ,
browserlarda var ilki yoksa diğeri o yoksa en sondaki kullanılır*/
background: url(../../COHERENTGAMESLOGO.png);
background-size: 100% 300px;
}
.coherentgamesyazi {
font-size: 20px;
text-shadow: 0px 0px 1px white;
background-color: lightgreen;
}
.medyalarim {
/*En yukarda aynı seviyedeki tüm div'lerin
width değeri 100% verilmiş zaten*/
/*medyalarim div'inin içersindeki elemanları
float left yap yani sola yasla*/
/*float:left;*/
/*içersindeki tüm yazılarım fontunu kalınlaştırır*/
font-weight: bold;
}
.medyalarim1 {
padding-top: 10px;
width: 33.33%;
height: 300px;
/*bu div'e float left dememize rağmen div içersindeki yazılar
float left yapmıyor sola yaslanmıyor merkezde duruyor*/
float: left;
}
.medyalarim1 {
padding-top: 10px;
width: 33.33%;
height: 300px;
float: left;
}
.medyalarim1 {
padding-top: 10px;
width: 33.33%;
height: 300px;
float: left;
}
.medyalarim1:nth-child(1) {
/*medyalarım class'ının 1. child'ı anlamına gelir*/
background: url("../../fetuspt.jpg") no-repeat;
background-image: 100% 100%;
background-size: cover;
}
.medyalarim1:nth-child(1) p {
color: turquoise;
}
.medyalarim1:nth-child(2) {
/*medyalarım class'ının 1. child'ı anlamına gelir*/
background: url("../../mary.jpg") no-repeat;
background-image: 100% 100%;
background-size: cover;
}
.medyalarim1:nth-child(2) p {
color: green;
}
.medyalarim1:nth-child(3) {
/*medyalarım class'ının 1. child'ı anlamına gelir*/
background: url("../../sounthbound.jpg") no-repeat;
background-image: 100% 100%;
background-size: cover;
}
.medyalarim1:nth-child(3) p {
color: purple;
}
#hakkimda {
padding-top: 30px;
/*clear: both; float left ve
float right varsa buna etkiyen
onları iptal etmek için*/
height: 330px;
background-color: red;
color: black;
}
#hakkimda img {
border: 5px dashed grey;
}
#hakkimda p {
white-space: pre-line;
text-transform: capitalize;
}
/* #hakkimda p span{
font-size: larger;
font-weight: bold;
} */
#hakkimda p::first-line {
font-weight: bold;
text-decoration: underline;
font-size: 30px;
letter-spacing: 3px;
}
#media screen and (max-width:992px) and (min-width: 0px){
.medyalarim1 {
width: 100%;
}
#hakkimda img{
margin-top:30px;
}
#hakkimda{
background-color: tomato !important;
}
}
</style>
</head>
<body>
<div id="coherentgames">
<span class="coherentgamesyazi">
Coherent Games Korku Oyunları Tasarlar
</span>
</div>
<div class="medyalarim">
<div class="medyalarim1">Konusu apartman dairesinde geçer.
<p>Kapalı ortamda en iyi korku oyunu</p>
</div>
<div class="medyalarim1">Konusu ötanazi'dir.
<p>Kasaba ortamında geçen oyundur.</p>
</div>
<div class="medyalarim1">Konusu antolojik korkudur.
<p>Hikayeler her türlü ortamda geçmektedir.</p>
</div>
</div>
<div id="hakkimda">
<img src="../../eyeTers.jpg" alt="">
<p>Coherent Games
Böbreküstü bezlerinizi patlatır. Size adrenalin kusturur.
</p>
</div>
</body>
</html>
Screenshots:
enter image description here
enter image description here
I tried the same code for firefox browser too but it did not work there either, here is the screenshot: enter image description here
I solved the problem:
Putting
height: 100%;
into,
#hakkimda{
background-color: tomato !important;
}
Solution:
#hakkimda{
height: 100%;
background-color: tomato !important;
}
This solves the problem!!!
When you resize your window than before the 992 screen resolution, it will take tomato color as the background color.
#hakkimda {
padding-top: 30px;
/*clear: both; float left ve
float right varsa buna etkiyen
onları iptal etmek için*/
height: 330px;
background-color: red;
color: black;
}
#hakkimda img {
border: 5px dashed grey;
}
#hakkimda p {
white-space: pre-line;
text-transform: capitalize;
}
/* #hakkimda p span{
font-size: larger;
font-weight: bold;
} */
#hakkimda p::first-line {
font-weight: bold;
text-decoration: underline;
font-size: 30px;
letter-spacing: 3px;
}
#media screen and (max-width:992px) and (min-width: 0px){
.medyalarim1 {
width: 100%;
}
#hakkimda img{
margin-top:30px;
}
#hakkimda{
background-color: tomato !important;
}
}
<div id="coherentgames">
<span class="coherentgamesyazi">
Coherent Games Korku Oyunları Tasarlar
</span>
</div>
<div class="medyalarim">
<div class="medyalarim1">Konusu apartman dairesinde geçer.
<p>Kapalı ortamda en iyi korku oyunu</p>
</div>
<div class="medyalarim1">Konusu ötanazi'dir.
<p>Kasaba ortamında geçen oyundur.</p>
</div>
<div class="medyalarim1">Konusu antolojik korkudur.
<p>Hikayeler her türlü ortamda geçmektedir.</p>
</div>
</div>
<div id="hakkimda">
<img src="../../eyeTers.jpg" alt="">
<p>Coherent Games
Böbreküstü bezlerinizi patlatır. Size adrenalin kusturur.
</p>
</div>
I want the text to be below the button on the right side, like so:
|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|
| SOME BUTTON |
| |
|_______________________________________|
powered by Company
Tried everything with different divs etc, but can't get it too work.
.info_button{
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: #E50000;
color: #fff;
width: auto;
text-align: center;
padding: 10px 20px;
cursor: pointer;
/*margin-bottom: 20px;*/
margin-top: 10px;
font-size: 17px;
display: inline-block;
font-weight:330;
}
#media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)
{
.info_button
{
line-height:1.2;
}
}
<div style="text-align: center;"><a class="info_button" href="">Here is a button-text</a>
</div>
<div style="font-size: 10px; text-align: right; margin-bottom: 20px;">powered by companyname</div>
Probably this is really easy and I'm just lost.
Keep both on the same div
.info_button {
border: none;
border-radius: 5px;
background: #E50000;
color: #fff;
padding: 10px 20px;
cursor: pointer;
margin-top: 10px;
font-size: 17px;
display: inline-block;
font-weight: 330;
}
.box {
display:table; /* fit content */
margin:auto; /* center div */
text-align:right; /* push text to right */
}
<div class="box">
<a class="info_button" href="">Here is a button-text</a>
<div style="font-size: 10px; ">powered by companyname</div>
</div>
I'm trying to make my website responsive without Bootstrap but when I use the #Media query tag it doesn't work - nothing changes.
.........................................................................
This is my code:
body {
font-family: "Oswald",Helvetica,Arial,sans-serif;
/* font-family: 'Roboto', sans-serif; */
/* overflow-y: hidden; */
/* background-image: url("https://preview.redd.it/qmfjuz883g7z.png?width=1024&s=c5e92c9c5e20b147ef13daf77eab47dae203496f"); */
background-color: #e5e5e5;
/* background-color: #222831; */
margin: 0px;
}
html {
scroll-behavior: smooth;
}
h1 {
margin: 0;
}
.Terms:hover {
font-weight: bold;
text-decoration: underline;
}
.Terms {
text-decoration: none;
color: white;
}
.SmallGamesLogoWhite:hover {
transform: scale(1.1);
}
.SocialMedia {
margin-top: 85px !important;
height: 60px !important;
}
.Company_Text_Info {
color: #fafafa;
width: 500px;
margin-top: 30px;
margin-left: 20px;
}
.EmailIcon_Link:hover {
text-decoration: underline;
font-weight: bold;
}
.EmailIcon_Link {
margin-left: 20px;
color: #fafafa;
text-decoration: none;
}
.EmailIcon_Image {
margin-top: 10px;
margin-left: 20px;
height: 20px;
}
.SmallGamesLogoWhite {
margin-top: 30px;
margin-left: 20px;
/* margin-right: 150px; */
height: 35px;
}
#footer {
background-color: #393e46;
height: 400px;
}
#logo {
padding: 20px 20px;
top:0;
left:0;
}
.SmallGameStudio_footer {
margin-top: 350px;
}
#video-content {
margin-top: 100px;
margin-bottom: 100px;
}
.video_h1 {
margin-top: 100px;
}
.video_p {
font-size: 15px;
width: 450px;
text-transform: uppercase;
}
.CenteredText{
margin-top: 35px;
color: white;
}
/* .CenteredText_Span{
color: white;
font-weight: bold;
} */
.NavbarLinks_Video{
margin-right: 450px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
::-moz-selection { /* Code for Firefox */
color: white;
background: #ffe4e4;
}
::selection {
color: white;
background: #ffe4e4;
}
.NavbarLinks_Games{
margin-right: 635px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
#LearnMore {
margin-top: 150px;
margin-bottom: 300px;
color: white;
}
.games_image:hover {
cursor: pointer;
transform: scale(1.1);
}
#games {
background-color: #393b44;
margin: 0;
}
.games_content_fig_desc {
color: white !important;
width: 250px;
margin-top: 15px;
}
.games_content {
display: flex;
flex-wrap:wrap;
}
.games_content_fig {
margin-left: 55px;
color: black;
color: #ffec00;
}
.download_button:hover {
transform: scale(1.1);
}
.download_button {
background-color: #ff7171; /* Default Website Color Scheme */
margin: 25px 55px;
border: none;
color: white;
padding: 15px 32px;
cursor: pointer;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
#media (max-width: 980px) {
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
}
#background_grass {
background-image: url("https://preview.redd.it/qmfjuz883g7z.png?width=1024&s=c5e92c9c5e20b147ef13daf77eab47dae203496f");
/* margin-top: 45px;
padding: 5px; */
height: 750px;
}
#LearnMore:hover{
color: white;
}
.Copyright_Text {
margin-bottom: 5px;
color: white;
}
.LearnButton:hover {
color: white;
background-color: #d9adad;
}
.LearnButton {
width: 150px;
}
.FooterLinks:hover {
font-weight: bold;
text-decoration: underline;
}
#FooterLinks {
word-spacing: 30px;
font-size: 35px;
padding-top: 50px;
}
.FooterLinks {
color: white;
text-decoration: none;
}
.NavbarLinks_Home{
margin-right: 800px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
.NavbarLinks_Contact {
margin-right: 300px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
.LearnMore_Social {
margin-right: 600px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
.ArrowUpIcon {
height: 45px;
}
.LearnMore_P {
font-size: 20px;
width: 500px;
}
.LearnMore_Desc:hover {
background-color: #d9adad; /* Default Website Hover Color Scheme*/
}
.LearnMore_H1 {
font-size: 35px;
}
.LearnMore_Desc {
background-color: #ff7171; /* Default Website Color Scheme */
margin-top: 25px;
margin-right: 50px;
border: none;
color: white;
padding: 10px 20px; /* Default Padding was 15px 32px;*/
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 5px;
font-size: 16px;
}
.NavbarLinks_Home:hover{
color: white !important;
height: 53px;
background-color: black;
font-weight: bold;
text-decoration: underline;
}
.NavbarLinks_Contact:hover{
color: white !important;
height: 53px;
background-color: black;
font-weight: bold;
text-decoration: underline;
}
.NavbarLinks_Games:hover{
color: white !important;
height: 53px;
background-color: black;
font-weight: bold;
text-decoration: underline;
}
.NavbarLinks_Video:hover{
color: white !important;
height: 53px;
background-color: black;
font-weight: bold;
text-decoration: underline;
}
.GooglePlay_Icon {
/* margin-right: 600px; */
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
word-spacing: 30px;
font-size: 45px;
height: 45px;
}
.itch_image:hover {
cursor: pointer;
transform: scale(1.1);
}
.itch_image {
height: 50px;
border-radius:35px;
margin-top: 10px;
margin-left: 20px;
}
.googleplay_image:hover {
cursor: pointer;
transform: scale(1.1);
}
.QuickLinks_Links:hover {
transform: scale(1.1);
}
.QuickLinks_Links {
color: #fafafa;
font-size: 25px;
position: absolute;
top: 0;
right: 0;
text-decoration: none;
}
.QuickLinks {
margin-top: 85px;
margin-right: 550px;
}
.subscribe {
margin-top: 85px;
position: absolute;
top: 0;
right: 0;
}
input[type=text], select {
width: 75%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.subscribe_h1 {
margin-bottom: 20px;
color: #fafafa;
}
.subscribe_button:hover {
transform: scale(1.1);
}
.subscribe_button {
margin-right: 65;
background-color: #ff7171;
border: none;
color: white;
padding: 15px 20px;
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-block !important;
border-radius: 5px;
font-size: 16px;
}
.QuickLinks_Contant {
margin-top: 130px;
margin-right: 535px;
}
.QuickLinks_Games {
margin-top: 175px;
margin-right: 542px;
}
.QuickLinks_Videos {
margin-top: 220px;
margin-right: 542px;
}
.QuickLinks_Terms {
margin-top: 265px;
margin-right: 430px;
}
.copyright_message {
padding-top: 3px;
color: #fafafa;
}
.Privacy:hover {
text-decoration: underline;
font-weight: bold;
}
.Privacy {
color: #fafafa;
text-decoration: none;
}
.message_development {
position: absolute;
top: 0;
right: 0;
margin-top: 200px;
margin-right: 100px;
width: 500px;
color: white;
}
.subscribe {
margin-right: 150px;
margin-top: 300px;
position: absolute;
top: 0;
right: 0;
}
#copyright {
height: 65px;
background-color: #455d7a;
}
.QuickLinks_h1 {
margin-bottom: 100px;
/* position: absolute;
bottom: 0;
right: 0; */
color: white;
}
.Logo_Header {
margin-top: 200px;
}
.googleplay_image {
height: 50px;
margin-top: 10px;
margin-left: 30px;
}
/* .Itch_Footer_Icon {
margin-right: 600px; */
/* margin-bottom: 20px;
margin-top: 150px;
border-radius: 75px;
padding: 25px 25px;
font-size: 45px;
height: 45px;
} */
.GooglePlay_Footer_Icon:hover {
transform: scale(1.1);
}
.GooglePlay_Footer_Icon {
/* margin-right: 600px; */
/* margin-bottom: 20px; */
margin-top: 50px;
padding: 25px 15px;
font-size: 45px;
height: 45px;
}
/* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
.SmallGamesLogo:hover {
transform: scale(1.1);
}
.GooglePlay_Icon:hover {
transform: scale(1.5);
}
.Itch_io_Icon:hover {
transform: scale(1.5);
}
.Itch_io_Icon {
margin-right: 150px;
/* margin-right: 600px; */
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
font-size: 45px;
border-radius: 75px;
height: 45px;
}
#container {
width: 100%;
max-width: 1100%;
}
#Navbar {
/* position: fixed;
top: 0;
left: 0; */
width: 100%;
background-color: white !important;
}
.LearnButton {
background-color: #ff7171; /* Default Website Color Scheme */
margin-top: 25px;
border: none;
color: white;
padding: 15px 32px;
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 5px;
font-size: 16px;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: white;
color: #ff5757;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
color: white !important;
background-color: #ff5757;
}
./* Use a media query to add a break point at 800px: */
#media screen and (max-width:800px) {
#background_grass, #Navbar, #logo, #NavLinks {
width:100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
/* Footer Wavy CSS */
<!DOCTYPE html>
<html>
<head>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/a779d142a2.js" crossorigin="anonymous"></script>
<!-- StyleSheet -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/games.css">
<link rel="shortcut icon" type="image/png" href="img/favicon_platformergame.png"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#300&display=swap" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet"> -->
<!-- <meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=yes" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SmallGamesStudios</title>
</head>
<body>
<div id="container">
<div id="Navbar">
<div id="logo">
<!-- Make image (Logo) black -->
<img class="SmallGamesLogo" src="img/SmallGamesLogo.png" alt="SmallGamesStudios"/>
</div>
<div id="NavLinks">
<div class="Navbar_Links">
<a class="NavbarLinks_Contact" href="contact.html">Contact</a>
<a class="NavbarLinks_Games" href="games.html">Games</a>
<a class="NavbarLinks_Video" href="videos.html">Video</a>
<a class="NavbarLinks_Home" href="index.html">Home</a>
</div>
<div class="Navbar_Social">
<img class="GooglePlay_Icon" src="img/GooglePlay.png" alt="Google Play Icon"/>
<img class="Itch_io_Icon" src="img/itch.io.png" alt="Itch.io Icon"/>
<!-- <img class="Youtube_Icon" src="img/YoutubeLogo.png" alt="Youtube_Icon"/> -->
<!-- <a class="NavSocial_Itch" href="#"><i class="fab fa-itch-io"></i></a>
<a class="NavSocial_GooglePlay" href="#"><i class="fab fa-google-play"></i></a> -->
</div>
</div>
<div id="games">
<div class="games_content">
<div class="PlatformerGame">
<figure>
<img class="games_image" src="img/PlatformerGame.png" alt="dream_blast_icon">
<figcaption class="games_content_fig">Platformer Game</figcaption></a>
<figcaption class="games_content_fig games_content_fig_desc">We just launched our first, new game! Try avoid dieing from enemies and falling! Collect coins to win, keep your score and try and win! This game is Only for Computers and PCs. Make sure to extract the file and run the exe file!</figcaption>
<button class="download_button" type="button" name="button">Download</button>
</figure>
</div>
<div class="message">
<h2 class="message_development">We are currently in development making new games! Make sure you subscribe to our Newsletter to get a notification!</h2>
<div class="subscribe">
<form action="https://formspree.io/maypgwbg" method="post">
<input class="subscribe-input" placeholder="Your Email" type="text" name="_replyto"/>
<button class="subscribe_button" type="submit">Send</button>
</form>
</div>
</div>
<!-- <div class="angry_birds">
<figure>
<img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon">
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<button class="download_button" type="button" name="button">Download</button>
</figure>
</div>
<div class="angrybirds_match">
<figure>
<img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon">
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<button class="download_button" type="button" name="button">Download</button>
</figure>
</div>
<div class="angrybirds-friends">
<figure>
<img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon">
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<button class="download_button" type="button" name="button">Download</button>
</figure>
</div>
<div class="angrybirds_evolution">
<figure>
<img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon">
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<button class="download_button" type="button" name="button">Download</button>
</figure>
</div>
<div class="angrybirds_blast">
<figure>
<img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon">
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<button class="download_button" type="button" name="button">Download</button>
</figure>
</div> -->
</div>
</div>
<button onclick="topFunction()" id="myBtn" title="Go to top"><img class="ArrowUpIcon" src="img/ArrowUpIcon.png" alt=""></button>
<div id="footer">
<!-- <div class="SocialMedia_Footer"> -->
<div id="SmallGamesLogoWhite Company_Info SocialFooter_Links">
<img class="SmallGamesLogoWhite" src="img/SmallGamesLogoWhite.png" alt="SmallGamesStudiosFooter"/>
<p class="Company_Text_Info">
SmallGameStudios is a small mobile and PC/Laptop gaming company. Founded in 2020, SmallGameStudios has released some games. Several fun games. We are here to do the best work to entertain people worldwide and make games that we want to show to our friends. Join us on this new journey and lets connect the world through amazing games made with pride and passion.
</p>
<p class="Email"><img class="EmailIcon_Image" src="img/Email_Icon.png" alt="Email_Icon"><a class="EmailIcon_Link" href="contact.html">abdulfareed454#gmail.com</a></p>
<img class="itch_image" src="img/itch.io.png" alt="itch.io-logo">
<img class="googleplay_image" src="img/GooglePlay.png" alt="GooglePlay-icon">
</div>
<!-- <div id="QuickLinks">
<center>
<h1 class="QuickLinks_h1">Quick Links</h1>
<a class="QuickLinks QuickLinks_Links" href="#">Home</a>
<a class="QuickLinks_Contant QuickLinks_Links" href="contact.html">Contact</a>
<a class="QuickLinks_Games QuickLinks_Links" href="games.html">Games</a>
<a class="QuickLinks_Videos QuickLinks_Links" href="videos.html">Videos</a>
<a class="QuickLinks_Terms QuickLinks_Links" href="terms.html">Terms & Conditions</a>
</center>
</div> -->
<center>
<div id="copyright">
<div class="copyright_message">
<p class="copyright_message_text">© 2009 - 2020 SmallGameStudios. All rights Reserved. <a class="Privacy" href="#">Privacy policy</a>.</p>
</div>
</div>
</center>
<!-- <div>
<h1 class="Newsletter_h1">Join Our Newsletter</h1>
<form action="https://formspree.io/maypgwbg" method="POST">
<input class="" placeholder="Your Email" type="text" name="_replyto">
<button class="" type="submit">Send</button>
</form>
</div> -->
</div>
</div>
</body>
<!-- Script Section -->
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
.......................................................................................
This is the code i added for #media:
#media screen and (max-width:800px) {#background_grass, #Navbar, #logo, #NavLinks { width: 100%; } }
What am i doing wrong? I'm writing the #Media query wrong?
After a quick look at your code I'd recommend trying something like this:
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
#media (max-width: 980px) {
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
}
Also I'd maybe include this:
* {
width: 100%;
padding: 0;
margin: 0;
}
There's no quick way to use media queries and make it responsive but wrapping media queries below and making adjustments to the individual parts can work really well and allow you to have the finish that you want.
When building from scratch, you have to plan and structure your HTML to make the page responsive. You can make a web page responsive with Media Queries. However, there are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. For starters you can do something like this:
*{
margin: 0;
padding: 0;
}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (max-width: 600px) {
/* Define CSS rules for mobile device here */
.col-2,
.col-3{
width: 100% !important;
}
}
/* CSS rules for rest of the screen size */
.col{
min-height: 10vh;
float: left;
text-align: center;
}
.col-1{
width: 100%;
background: lime;
}
.col-2{
width: 50%;
background: pink;
}
.col-3{
width: 33.3%;
background: cyan;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive</title>
<link rel="stylesheet" href="./assets/css/custom.css">
</head>
<body>
<div class="col col-1">col-1</div>
<div class="col col-2">col-2</div>
<div class="col col-2">col-2</div>
<div class="col col-3">col-3</div>
<div class="col col-3">col-3</div>
<div class="col col-3">col-3</div>
</body>
</html>
Always Design for Mobile First.Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).
You can define CSS rules for mobile device inside the Media Query for mobile device.
Then modify the property for the same elements out side the Media Query block of mobile device to make it look good on other screens.
You can define CSS Media Queries for multiple Screens also. For example as below:
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {...}
You can tweak it and adjust to your needs. Experiment.
Some Screenshots:
On Desktop
On Mobile
I want to make a banner which has an image with transparent background on the right and some text and button on the left side.
I have made a two column layout one containing the text and other containing the image displayed horizontally on large screen and stacked reversely on smaller screen.next I want to add some background color to both the columns so that they look like one entity. However I want the image to overflow the background color on top so that it
looks some thing like this
But My current design looks like this:
Here is my code:
.row {
background-color: #fff;
padding-top: 20px;
padding-bottom: 10px;
}
.textstyle h1 {
font-size: 25px;
font-weight: 700;
color: #484848;
line-height: 30px;
}
.textstyle p {
font-size: 18px;
font-weight: 200;
color: #484848;
}
.imgbox {
width: 100%;
height: 400px;
}
.captionbox {
padding-top: 80px;
padding-left: 20px;
padding-right: 20px;
}
.backcolor {
background-color: #ccc;
width: 100%;
height: 400px;
}
.mybutton {
cursor: pointer;
background: #00A699 !important;
color: #fff;
border-radius: 20px;
width: 200px;
padding: 10px;
font-size: 16px;
}
#media (max-width: 1000px) {
.captionbox {
padding-top: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="backcolor">
<div class="col-md-7 col-md-push-5">
<div class=""><img src="http://i.imgur.com/GguXEnF.png" class="imgbox"></div>
</div>
<div class="col-md-5 col-md-pull-7">
<div class="textstyle captionbox">
<h1>Hosting Opens Up a world of opportunity</h1>
<p>Earn Money Sharing Your Extra Space with Travellers.</p>
See What You Can Earn
</div>
</div>
</div>
</div>
</div>
I tried using padding and margin on top but did not work, please suggest a solution.
Use position to make it upper and increase image height.
.imgbox{
width: 100%;
height: 430px;
position: absolute;
top: -30px;
}
.row{
background-color: #fff;
padding-top: 20px;
padding-bottom: 10px;
}
.textstyle h1{
font-size: 25px;
font-weight: 700;
color:#484848;
line-height: 30px;
}
.textstyle p{
font-size:18px;
font-weight:200;
color:#484848;
}
.imgbox{
width: 100%;
height: 430px;
position: absolute;
top: -30px;
}
.captionbox{
padding-top: 80px;
padding-left: 20px;
padding-right: 20px;
}
.backcolor{
background-color: #ccc;
width: 100%;
height: 400px;
}
.mybutton{
cursor: pointer;
background: #00A699 !important;
color: #fff;
border-radius: 20px;
width:200px;
padding:10px;
font-size: 16px;
}
#media (max-width: 1000px){
.captionbox{
padding-top: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="backcolor">
<div class="col-md-7 col-xs-7 col-md-push-5 col-xs-push-5"><div class=""><img src="http://i.imgur.com/GguXEnF.png" class="imgbox"></div></div>
<div class="col-md-5 col-xs-5 col-md-pull-7 col-xs-pull-7">
<div class="textstyle captionbox">
<h1>Hosting Opens Up a world of opportunity</h1>
<p>Earn Money Sharing Your Extra Space with Travellers.</p>
See What You Can Earn
</div>
</div>
</div>
</div>
</div>
i am making a website when i am om full screen the website looks good but when i am making the screen smaller the divs come out etc.
Here is a printscreen of it:
How do i fix this?
This is the HTML and CSS im using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jari Rengeling</title>
<link rel="stylesheet" href="../CSS/StyleSheet.css" type="text/css">
</head>
<body>
<div id="header">
<img alt="wood" src="../Images/wood.png" id="wood">
<div id="menu">
<span id="naam">Jari Rengeling</span>
<ul id="nav1">
<li class="li1">Home</li>
<li class="li1">Over mij</li>
<li class="li1">Ervaringen</li>
<li class="li1">Contact</li>
</ul>
</div>
<div id="headertext">
<h1 class="space">Welkom</h1>
<p class="space" id="headerp">Mijn naam is Jari Rengeling, ik ben een beginnend Applicatieontwikkelaar. Neem gerust een kijkje op mijn eigen portfolio.</p>
</div>
</div>
<div id="footer">
<div id="navigatie">
<h2 id="h22">Navigatie</h2>
<ul id="ul2">
<li class="li2">Home</li>
<li class="li2">Over mij</li>
<li class="li2">Ervaringen</li>
<li class="li2">Contact</li>
</ul>
</div>
<div id="projecten">
<h2 id="h21">Projecten</h2>
<div id="project1"></div>
<div id="project2"></div>
<p>Geen huidge projecten...</p>
</div>
<div id="socialmedia">
<h2 id="h23">Sociale Media</h2>
<img alt="facebook" src="../Images/facebook.png" id="facebook" class="miniaturen">
<img alt="twitter" src="../Images/twitter.png" id="twitter" class="miniaturen">
</div>
<div id="contact">
<h2 id="h24">Contact</h2>
<p>Klik hier om mijn contact gegevens te bekijken!</p>
</div>
</div>
</body>
</html>
CSS
body
{
margin: 0px;
padding: 0px;
background-color: rgba(154, 135, 100, 1.0);
width: auto;
}
#menu
{
width: 100%;
height: 100px;
z-index: 1;
background-color: rgba(154, 135, 100, 0.80);
}
#nav1
{
margin: 0px;
text-align: right;
margin-right: 400px;
}
.li1
{
display: inline;
padding-left: 2%;
font-size: 19px;
line-height: 100px;
font-family: Champagne;
color: white;
}
#wood
{
position: absolute;
z-index: -1;
height: 800px;
width: 100%;
}
#naam
{
font-family: Champagne;
font-size: 40px;
color: white;
line-height: 100px;
margin: 0px;
position: absolute;
margin-left: 400px;
}
.space
{
margin: 0px;
color: white;
padding-top: 20px;
text-align: right;
font-family: Caviar;
}
#headerp
{
max-width: 480px;
display: inline-block;
font-size: 25px;
}
#headertext h1
{
font-size: 50px;
}
#headertext
{
float: right;
margin-right: 400px;
margin-top: 240px;
}
#footer
{
background-color: rgba(154, 135, 100, 0.80);
height: 210px;
width: 100%;
margin-top: 700px;
}
#h21
{
font-family: Caviar;
margin-left: 400px;
color: white;
border-bottom: 1px solid white;
max-width: 230px;
padding-top: 10px;
}
#project1
{
border: 1px solid black;
width: 100px;
height: 100px;
margin-left: 400px;
background-color: rgba(128, 128, 128, 0.15);
position: absolute;
padding-top: 0px;
}
#project2
{
border: 1px solid black;
width: 100px;
height: 100px;
margin-left: 530px;
background-color: rgba(128, 128, 128, 0.15);
padding-top: 0px;
position: absolute;
}
p
{
font-family: Caviar;
color: #ebebeb;
}
#projecten p
{
margin-left: 400px;
margin-top: 120px;
position: absolute;
}
#projecten
{
margin-left: 200px;
margin-top: 0px;
padding-top: 0px;
}
#navigatie
{
margin-left: 400px;
position: absolute;
}
.li2
{
list-style-type: none;
}
#ul2
{
position: absolute;
margin: 0px;
padding: 0px;
padding-top: 10px;
font-family: Caviar;
color: #ebebeb;
}
#h22
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
a:hover
{
color: black;
}
#h23
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
#socialmedia
{
position: relative;
margin-left: 900px;
top: -56px;
padding: 0px;
max-width: 214px;
}
.miniaturen
{
padding-right: 5px;
padding-top: 20px;
}
#contact
{
position: absolute;
margin-left: 1200px;
top: 802px;
padding: 0px;
max-width: 100px;
}
#h24
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
a
{
text-decoration: none;
color: white;
font-family: Champagne;
}
There is a rule in css known as #media rule.
#media is used for creating responsive webpage.
example of #media rule :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>
Seeing your CSS code, I noticed you are almost always using pixels as a measure. You shouldn't do that unless you know exactly the size of the screen were your website will be open. Otherwise, using percentages is always a good thing. You can control the style like with pixels and when you resize, since everything has it's size according their parent elements, everything will resize.
I changed a bit of your CSS and HTML code for you to see it. It's not perfect but you can understand the power of using percentages instead of pixels (:
http://jsbin.com/tacayaweya/edit?html,css,output
You could use #media queries (just like it was said here) to control the style your website based on the screen size. The example of #Advaith is a good example of how to use it.
As also mentioned in the comments, using frameworks like Bootstrap can help you with the design of your website.