Iam working on a wordpress theme, and i want to make my logo to overlay over my slider .
I tried couple of ways with css . But it seems that its getting bigger on smaller screens . Whould i should use media queries and make it visible none on smaller screens ?
My CSS code to the logo image.
#media screen and (max-width: 767px) {
.logo img {
display: none !important;
}
}
.header_mid_inner .logo img {
max-height: none !important;
max-width: none !important;
left: 50px !important;
top: 100px !important;
width: 135px !important;
height: 150px !important;
border: 1px solid white !important;
}
If I get it right you want to make the logo responsive with the banner top. To achieve this you need to use % values not pixels for height and width. Also the positioning must be in % so it will rescale with the page.
Related
I'm fairly new to coding and need help.
I'm creating a responsive site and I am stuck with the header image. On desktop, it looks fine. When I go to mobile, I like the size of it but the image breaks out of the container and shows a horizontal scroll bar. I tried (overflow-x: hidden;) which did the job of hiding the scrollbar but it ended up messing up the image in mobile view.
I then gave the image container a width of 100% and it fits perfectly onto the screen with no horizontal bar, but the image is way too small.
I was wondering how I can get the image to stay the same but fit into the container?
I attached an image to further explain what I'm talking about. Thanks!
You can use srcset html code. It is pretty simple.
<img srcset="image.jpg 320w, image.jpg 480w, image.jpg 800w"
sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
src="image.jpg" alt="Image">
if you are using background image then use these css rules to keep consistent for all images
div {
overflow-x: hidden;
}
div.img {
background-position: center; // or give top center based on your need
}
I think left: -50% may help center the image:
/* the div outside */
.mobile {
border: 1px solid black;
width: 500px; /*size of the mobile screen*/
height:1500px;
overflow-x: hidden;
}
/* bottle img */
.bottle{
left: -50%;
max-height: 100%;
overflow: hidden;
position: relative;
background-position: center;
}
effect in my test:
And the source for more reference:
Center a large image of unknown size inside a smaller div with overflow hidden
I have a big background image, but the image is not good in small mobile browser. It displayed a horizontal scroll bar and the image is crop.
The image should be:
The 3 person in the image should be display in the center
No scrollbar
How to fix this?
CSS (responsive)
.header-home-div{
background: url(/testEnvironment/files/homepage-header-mobile.jpg) !important;
height: 700px;
width: auto;
I tried to use this:
background-size: cover !important;
background-position: center top;
but it's not working
Here's the link
I use this to test the responsiveness of the image
On the mobile size, you use an !important to the background property. So you need to use !important for setting a size too like this :
#media screen and (max-width: 992px)
.header-home-div {
height: 1500px;
width: auto;
background-size: 100% !important;
}
It's better to remove the !important property at first instead of overwriting it with the above fix by the way.
The horizontal scrollbar depends on .header-home-h1 margin. The following should fixed it :
#media (max-width: 520px)
.header-home-h1 {
text-align: left;
margin: 0;
width: 100%;
font-size: 2.25em;
}
I have a div that has a max-width, and is centered:
.div1 {
background-color: #eee;
max-width: 600px;
margin: auto;
}
The div gets automatically centered, but I want it to also have a margin of 20px on the left and right side, if the window gets smaller than 600px.
Here is the JSFiddle of what I am trying to accomplish: FIDDLE . I would like to add the properties of div2 to div1, without losing the ability to center div1.
Use a media query to specify when to override the margins and give them 20px on each side.
CSS:
.div1 {
background-color: #eee;
max-width: 600px;
margin: 0 auto;
}
#media screen and (max-width: 640px) {
.div1 {
margin-left: 20px;
margin-right: 20px;
}
}
use margin-left:auto
margin-right:auto
when the screen is bigger than 600px it 'll automatically come to the middle of the page
i am creating a responsive web design containing images....i want to know if there is any way i can crop images when they overlap i.e if i have two images in one line image 1 and image 2
image 1 is at the left and image 2 is at right and i start lessening width of my browser, and when image 2 reaches image 1, image 2 starts cropping or hiding or whatever....how m i going to do that?
here is my code for what i am trying:
#logo{
float:right;
margin:88px 0 0 70px;
position:absolute;
}
#header-add{
float:right;
margin:35px -10% 0 0;
cursor:pointer;
}
Logo is image 1 and header-add is image 2
Rather than crop the image, I'd suggest simply setting your CSS to set the width of the images appropriately when the browser width is decreased. This way you don't have to worry about cropping.
For example (values arbitrary, but percentage-based, which I find best for responsive design):
#media screen and (max-width: 768px) {
#header-add {
width: 40%;
}
}
#media screen and (max-width: 480px) {
#header-add {
width: 25%;
}
}
If you don't want to set the width of the images via CSS, you can essentially "crop" the images if you enclose each of them in a div and you can set overflow:hidden on the div, and then set the width of the div in the CSS (like the aforementioned image width example).
Hope it helps!
Addition:
In answer to your comment about cropping from the left, here's how I would recommend doing it. The downside is that you have to add an explicit height on the div that crops the image, but it should work for you.
The HTML:
<div id="crop_div">
<img src="foo.jpg" alt="bar" />
</div>
The CSS:
#crop_div {
float: right;
height: 100px; /* Needed since contents use absolute position */
overflow: hidden; /* To crop the img inside of it */
position: relative; /* Set for img position below */
width: 400px;
}
#crop_div img {
position: absolute; /* To anchor it on the right */
right: 0;
}
#media screen and (max-width: 768px) {
#crop_div {
width: 40%;
}
}
clip() and overflow: hidden for masking for sure your content.
min-width and/or max-width to manage the width of each div when the sum of both would be too large for the width of the container.
I have a really bizarre issue that I just recently noticed
I'm working on a wordpress theme for a friend, and I'm using relative/absolute positions to add social/connect buttons on the side of some divs -- Which works fine to get the proper design.
The issue, however, arises on the "Social" div that is on the right side of the page.
If the browser is smaller than the main content's size, it adds extra white-space to the right side of page. If I move the div to the left side, it's fine; it only adds the whitespace at about half the page length (which is more confusing).
I can't for the life of me figure out why this is happening; I can't figure out if it's a standard behavior, or an issue I created on my own.
I was hoping perhaps someone here might have had similar experiences, or just an idea how to fix it.
The CSS for the #social div is:
#social{
width: 90px; height: 250px;
padding: 10px;
position: absolute; right: -40px; top: 40px;
background: #EFEFEF;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);}
The CSS for the #page-content div it resides in is:
#page-content{
clear: both;
min-height: 500px;
width: 870px;
margin: 0 auto;
padding: 20px 0;
position: relative;
border: 5px solid #FFF;
background: #F2F0D7;}
And the screenshot is:
The width up there only exists if the browser's width is less than 960px (the width of the content)
After viewing your site, it looks like it's your social pannel. Some of the generated elements are 100px or more wide. If you remove the width:90px;, you can see the width it's trying to achieve. You could wither amend those elements and set their widths smaller (or to 100% or whatnot), or you could apply overflow: hidden; to the #social div:
#social {
...
overflow:hidden;
}
The reason why this is occurring is because you have overflow out of your social container. It only happens on the right because those elements are left aligned. (you could also align the elements to the right I suppose.)
Hopefully that helps.
As far as I have understood - You want your template to be responsive . For that you need to write media queries to cater various media sizes and resolutions .
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
write css styling for the different sizes and you can make you website look the way you want .