I have a banner code that shows banner image big enough correctly on my laptop screen but when I open the same web page on my mobile phone, it shows the banner very small in height making it narrow to read. how to resolve this issue so that I can make the banner remain the same size for laptop screen as it is currently now, but much bigger for the mobile screens?
HTML CODE:
<?php
echo "<div class=custom-banner><img src=https://www.garnfyndet.se/wp-content/uploads/2019/12/banner.gif></div>";
?>
.custom-banner {
background-position: center center;
position: relative;
box-sizing: border-box;
display: block;
z-index: 999;
}
<div class=custom-banner><img src=https://www.garnfyndet.se/wp-content/uploads/2019/12/banner.gif></div>
I'm using WordPress, so maybe it inherits some CSS properties from style.css of WordPress. Currently, the banner image size is 1950 x 75.
You need to set img width to 100% so it would be responsive. and css selector needs to be .custom-banner img
.custom-banner {
background-image: url('https://www.garnfyndet.se/wp-content/uploads/2019/12/banner.gif');
background-position: center center;
background-size: contain;
position: relative;
width: 100%;
height: 75px;
background-repeat: no-repeat;
}
}
#media only screen and (max-width: 800px) {
.custom-banner {
background-image: url('https://www.voicesofyouth.org/sites/default/files/images/2019-03/nature-3125912_960_720.jpg');
height:400px;
}
}
<div class=custom-banner></div>
Also you need to set another img with lower height for mobile this photo is not good for responsive mobile.
you can use cs like this for mobile and background image would be changed when device width is lower than 400px. For Example:
#media only screen and (max-width: 400px) {
.custom-banner {
background-image: url('https://www.voicesofyouth.org/sites/default/files/images/2019-03/nature-3125912_960_720.jpg');
}
}
Related
At first I noticed the font sizes are large on the site and uncomfortable inside each article
I tried customizing the CSS file
To write a code that makes fonts smaller
for paragraphs and sub-headings
H2، H3
I tried some articles and found that the fonts have really changed and become smaller
But the problem is not all the fonts in some articles, the problem remains the fonts are in large sizes and have not changed
What is the cause of the problem and how can I set all the fonts in all articles smaller than the original size
See the picture that shows you a check mark
This has the fonts changed successfully, while the other picture has the font not changed
Then see also the code and a picture of where the code was modified
body {
font-size: 16px !important;
line-height: 35px !important;
}
.default_logo,.logo-sticky,.logo-mobile{
height: 110px !important;
}
.fullwidth-wrapper {
padding: 15px 30px;
}
#media only screen and (max-width: 1200px){
.wgl-theme-header .wgl-mobile-header {
display: block;
height: 120px;
}
.default_logo, .logo-sticky, .logo-mobile {
margin-top: 10px;
}
h2 {
font-size:24px !important;
}
h3 {
font-size:20px !important;
}
h4 {
font-size:18px !important;
}
}
Can't change the size of all fonts in wp
My parallax is not working at all after I change my HTML to PHP. It shows black background and not the image of parallax that I make
this is my CSS: style_new.css
.bgimg-1, .bgimg-2, .bgimg-3 {
opacity: 0.65;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 472px;
}
.bgimg-1 {
background-image: url("../img/ourmenu1.jpg");
min-height: 100%;
}
.bgimg-2{
background-image: url("../img/ourmenu2.jpg");
min-height: 100%;
}
.bgimg-3{
background-image: url("../img/asianbuffet2.jpg");
}
And this is my code on view
<!--- Parallax -->
<div class="col-md-12 bgimg-1">
</div>
Looks like a reference issue: try using absolute references to the images instead of relative ones.
This could also be related to some other relative references (not the images) which you are not showing, such as the javascript files being used for the parallax effect. Check those too
I have a few PDF files that were converted to HTML. I fully understand that this isn't ideal, but that's not something I can change.
The issue is that it places content at very specific points which breaks mobile responsiveness.
A typical HTML will looks like this:
<div class="pc pc1 w0 h0">
<div class="t m0 x0 h2 y1 ff1 fs0 fc0 sc0 ls0 ws0">Text</div>
</div>
And the CSS file like this:
#media screen and (-webkit-min-device-pixel-ratio:0){
.sc_{-webkit-text-stroke:0px transparent;}
.sc0{-webkit-text-stroke:0.015em transparent;text-shadow:none;}
}
.ws0{word-spacing:0.000000px;}
.fc0{color:rgb(35,31,32);}
.fs0{font-size:168.000000px;}
.y0{bottom:781.000000px;}
.h0{height:841.889770px;}
.w0{width:595.275630px;}
.x0{left:34.000000px;}
}
Is it possible to somehow make it scale? I'd even be happy(-ier) if I could just apply a media query to reduce everything in size by 20%.
As it appears from the posted CSS, position: absolute is used, so I can't see any other solution (yet) than using transform: scale() (if not to rewrite the html of course)
By using media query it could look like this
.outer {
height: 500px;
width: 800px;
background: red;
transform-origin: 0 0;
}
#media screen and (max-width: 1000px) {
.outer {
transform: scale(0.9);
}
}
#media screen and (max-width: 900px) {
.outer {
transform: scale(0.8);
}
}
#media screen and (max-width: 800px) {
.outer {
transform: scale(0.7);
}
}
height: 400px;
width: 600px;
}
<div class="outer"></div>
I'm trying to make square images from rectangular in css. They also need to be centered.
I've read a lot of questions here, but the answers, good as they might be, always use constant sizes in pixels whereas I need tem to be in percents so the theme can remain responsive.
Basically I need to change this:
into this:
but if the screen is even smaller:
The main problem here is I cannot predict the screen size. It is designed for mobile, so they can vary.
I was thinking about doing css in php (it's for wordpress so it's possible). I was thinking something like width:50% and use the width as a variable, but if I set the height to be equal to width, it will be 50% as well. Is there a way to, I don't know, convert the width to pixels or something? I'm out of ideas, please help.
The problem is, that it is just not possible to change the height relative to the width. So your problem is not the image itself (using overflow: hidden or background-size: cover will do that) but having the square size of your container with dynamic width and then the same height.
A very strange way would be to use a square image (_blank.png with 1px x 1px) and add width: 100% so the height will be the same.
with css:
div{width: 30%;}
img{width: 100%;}
and then add your actual picture as background-image with
background-size: cover;
background-position: center;
Neither performant nor beautiful, but it works.
have you tried this
img { width: 80%; }
make sure there is no height for img in your css file. Also make sure not to set something like height="500px" width="500px" in your html/php file.
also to be centered just do
img { margin: auto; }
Nice picture ;)
If you have an image you want centred—but covers—a parent element, using CSS only, then you’ll need two wrappers:
This works only for wide images. Portrait images will just centre themselves within the container.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.outer-wrapper {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
.inner-wrapper {
position: relative;
display: inline-block;
right: -50%;
}
.inner-wrapper img {
display: inline-block;
position: relative;
left: -50%;
}
</style>
</head>
<body>
<div class="outer-wrapper">
<div class="inner-wrapper">
<img src="//placehold.it/400x200" alt="" />
</div>
</div>
</body>
</html>
Just use img{max-width:100% !important; margin:0 auto !important;} and I think it will help you.
Try following css for your image. It won't break the pixels/dimensions for the image.
.imageClass img {
width: 50%;
height: auto;
}
.imageClass img {
width: auto;
height: 50%;
}
<img src="image_path" alt="" class="imageClass" />
Forgive me if this question has been asked before, but I always pull together random hacks for images and want to know a definitive way to do what I'm seeking. Here's the HTML:
<div class="track-artwork">
<img src="<?php echo $chart_track->image; ?>" class="background-image">
<audio>
<source src="" type="audio/mp4" />
<source src="" type="audio/aac" />
</audio>
</div>
</div>
The image I'm linking to is 111px X 111px. It needs to be smaller to fit into the track-artwork div and be fully displayed. I do not have the ability to edit the asset's size with something like photoshop. I want to make it so the image acts as a "background" of sorts, sized to fit the "track-artwork" div with 5px of margin on either size. Here's the CSS I've toyed with to achieve this:
.track-artwork {
cursor: pointer;
display: inline-block;
height: 100%;
margin: 0;
position: relative;
vertical-align: top;
width: 20%;
}
.background-image {
position: absolute;
z-index: 0;
width: 100%;
top: 0;
left: 0;
}
Unfortunately, this isn't working out. The width seems to be sized properly, but the height isn't working -- it seems to stay 111px no matter what I input. I've tried it with hard pixel values, but it doesn't change. Thoughts?
I would set the image to the div background and use either contain or cover as the background-size.
.track-artwork {
cursor: pointer;
display: inline-block;
height: 100%;
margin: 0;
position: relative;
vertical-align: top;
width: 20%;
background-size: cover; // or background-size: contain;
}
Cover will fill the entire div with the background image, cutting off part of the image if the ratios aren't the same.
Contain will resize the image to be fully visible within the div.
You'll have to set the background-image url to the correct image location using php.
You can do this with the CSS3 background-size property.
PHP
<div class="track-artwork" style="background-image:url(<?php echo $chart_track->image; ?>);">
<audio>
<source src="" type="audio/mp4" />
<source src="" type="audio/aac" />
</audio>
</div>
CSS
.track-artwork {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
IE8 Polyfill
If you need to support IE8, there is a Polyfill. You can get it, and information on how to use it at: https://github.com/louisremi/background-size-polyfill