Have small isue with image sizes while using "read more" button on image. Im trying to make image look smaller when using computer, but keep same size for mobile version. When im changing size of image for pc version, image getting too small for mobile version.
<style>
.container {
position: relative;
width: 100%;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 80%;
left: 80%;
transform: translate(-80%, -80%);
-ms-transform: translate(-80%, -80%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.container .btn:hover {
background-color: black;
}</style>
<div class="container">
<img src="/wp-content/uploads/2019/11/jaunaudzes-kopšana.jpg" alt="Jaunaudzes kopšana">
<button class="btn">Rādīt vairāk</button>
</div>
pc version image - https://imgur.com/EDhZE7q
phone version - https://imgur.com/xBZ2yhp
So i want to make pc version image smaller and keep same size for mobile. Suggestions?
You can use media queries to solve your issue. In the code below, whenever the screen size is greater than 480px, then the code will "execute".
#media only screen and (min-width: 480px) {
.container img {
width: 80%;
height: auto;
}
}
Related
I have a simple question about responsive design. I have a button that I want on the top right of the screen on PC but on the bottom center on mobile. Do I need to use #media or is there another way? I've tried text-align but it doesnt seem to work
.boton {
position: relative;
left: 80%;
top:5%;
font-family: 'Raleway', sans-serif;
font-size: 100%;
padding-right: 2%;
padding-left: 2%;
cursor: pointer;
#media screen and (max-width: 360px) {
.boton {
position:relative;
text-align:center;
}
<a href="mymail0#gmail.com">
<button class="boton">Contact Me</button>
</a>
You can use Transform property to do that, Just make element go 50% in left and translate it to -50% in x-axis means horizontally. Hope it works check out snippet. And you don't need to specify the position property when you are going to mobile screen, unless you don't want to change it as per your screen-width.
.boton {
position: relative;
left: 80%;
top:5%;
font-family: 'Raleway', sans-serif;
font-size: 100%;
padding-right: 2%;
padding-left: 2%;
cursor: pointer;
}
#media screen and (max-width: 360px) {
.boton {
text-align:center;
left : 50%;
transform : translateX(-50%);
}
}
<a href="mymail0#gmail.com">
<button class="boton">Contact Me</button>
</a>
I was looking for many posts here on stackoverflow, but there was nothing, what could help me. Maybe this question is trivial, but i don't know how to do that, because I am beginner in this
So i have some header, where is logo, menu and some title -that is not problem. Under this header i have div with class slider, where i want to have some background-image and on this background-image i want to have some button and title and another image. And here is finally my question.
What should i do, if i want to have this background-image of this div on full width and with auto height (height from end of header to end of screen) for any screen resolution on desktop?
I mean: if i have resolution 1920x1080 i want to have this bg-image from end of header to end of screen. Same thing for resolution for example 1366x768 etc etc...i hope you understand my question.
Example on this
image
Header is red. And i want to have bg-image (in this case white part of image, but i want to have image there) auto resize for any screen resolution.
I really hope you understand my question and someone can help me.
Really thanks for any reply
http://jsfiddle.net/YKY4t/
I have some errors in code so please...
Code:
#import url(https://fonts.googleapis.com/css?family=Quicksand:400,300,700);
body {
margin: 0;
padding: 0;
}
.mainheader {
width: 100%;
height: 10%;
background-color: #ff5959;
position: absolute;
}
.mainheader img {
max-width: 100%;
height: auto;
margin-left: 20%;
margin-top: 1.5%;
float: left;
}
.title {
position: absolute;
margin-top: 1%;
margin-left: 22%;
font-size: 35px;
font-family: 'Quicksand', sans-serif;
color: #ffffff;
}
.meta {
position: absolute;
margin-left: 18%;
margin-top: 3%;
font-size: 19px;
font-family: 'Quicksand',sans-serif;
font-weight: bold;
color: #ffffff;
}
.nav {
position: absolute;
right: 20%;
margin-top: 1%;
font-size: 19px;
font-family: 'Quicksand', sans-serif;
font-weight: bold;
}
.nav li {
list-style-type: none;
float: left;
}
.nav li a {
color: #ffffff;
text-decoration: none;
display: block;
margin-left: 25%;
}
.slider img {
background-image: url(../img/slider-image.png);
background-repeat: no-repeat;
background-position: center center fixed;
background-size: cover;
}
As i commented, you can use media queries for the different screen sizes where you can use different resolution images. In that case:
#media all and (min-width: 1920) {
.img-holder img{
background-img: url(../img/slider-image.png);
}
}
#media all and (min-width: 1366) {
.img-holder img{
background-img: url(../img/slider-image-medium.png);
}
}
You can use them to use all screen resolutions you want to cover.
You alse can use any responsive framework like Bootstrap which responsives the images.
I have a responsive site that works perfectly fine on all desktop browsers as well as mobile Chrome, resizing the way I want no matter how narrow the window gets, but I'm getting a horizontal scroll on mobile Firefox. My content is just slightly too big, although I can't imagine how with my CSS. Here's what I believe is relevant:
#main {
width: 90%;
max-width: 960px;
margin: 0 auto;
}
.infoSection {
display: inline-block;
height: 300px;
margin-bottom: 75px;
}
.infoSection img {
position: relative;
float: right;
max-width: 50%;
top: 50%;
transform: translateY(-50%);
}
#media (min-width: 0) and (max-width: 470px) {
.infoSection {
height: auto;
margin: 0 0 30px;
}
.infoSection img {
display: block;
float: none;
max-width: 80%;
margin: 20px auto 0;
transform: none;
}
}
Existing questions about horizontal scrolling on mobile all seem to involve setting overflow-x to hidden, which doesn't help because I want my content to resize properly. :/
I currently am using a fixed header for my website: http://www.destinykingproductions.com/test/ I have attached the css I currently have. Anyone have any suggestions on why this is happening?
#main {
background-color: transparent;
margin-top: -40px;
height: auto;
max-height: none;
width: auto;
padding-bottom: 35px;
}
header#masthead {
height: 103px;
background-image: url(http://www.destinykingproductions.com/test/wp-content/uploads/2014/08/header_bg1.jpg);
position: fixed;
z-index: 856;
width: 100%;
margin-top: 0px;
top: 0px;
}
nav.main-navigation {
top: -200%;
background-color: transparent;
z-index: 4670;
}
nav.main-navigation ul.menu li {
padding-left: 17px;
}
nav.main-navigation ul.menu {
margin-left: 18%;
}
#shiftnav-toggle-main {
display: none;
}
Thank you for your assistance!
The comments above are correct - the "sticky" class nav is being added / toggled at some point. When you add 'display:none' to that sticky class, then it is fine on a desktop view. However, it looks like you are using that class for something with mobile because when the screen is resized smaller and back to normal then the side menu area doesn't go away. It looks like you may want to move that sticky class to your 768px media query and/or have it not show on larger screens.
/*normal css*/
.main-navigation.sticky { display: none }
#media screen and (max-width: 768px)
{
.main-navigation.sticky { display: block }
}
I whipped up this site at http://www.flywavez.com/ and have it mostly situated (I have to even up a few margins a pixel here, a pixel there), but I went to check it on the iPhone, Android (galaxy s3 running 4.3, Chrome and the android browser), iPad, and Kindle and I don't think my CSS margins are being interpreted how they are in the screen browsers (i.e. - desktops and laptops).
I used percentages on my margins, and even tried padding, but I can't find that balance where the elements display relatively uniform. Should I specify a separate style sheet just for mobile with the different margins? For the phones, it seems like .socials ( a sprite, btw) would have a margin-left of 0, with a few on top to kick it down some.
The same for #quick-mid-text, on a seperate phone browser, the margin would be left 0.
However I want to keep it as much in one style sheet as possible. What should I use as margins or element arrangement to render the social media icons to be centered under the player, and for the paragraph in #quick-mid-text to be flush with the left edge of the player?
Here's my CSS:
.socials {
float: right;
padding-top: 13px;
margin-right: 40%;
width:275px;
}
.socials a {
display: block;
width: 58px;
height: 50px;
float: left;
background: url(../images/socials2.png) 0 0 no-repeat;
}
.socials a:hover {
opacity: 0.5;
}
.socials a+a {
margin-left: 12px;
background-position: -62px 0;
width: 56px;
}
.socials a+a+a {
margin-left: 4px;
background-position: -120px;
width: 32px;
}
.socials a+a+a+a {
margin-left: 4px;
background-position: -156px;
width: 93px;
}
I'd suggest you use media queries to change styles based on screen width. You can do base styles and then override them etc in your media query.
Eg:
.socials {
float: right;
padding-top: 13px;
margin-right: 40%;
width:275px;
}
#media only screen and (max-width: 979px) {
.socials {
margin-right: 10px;
}
}
Please Try This css...
#quick-mid-text {
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 13px;
width: 42%;
}
.socials { /* style.css -line no.756*/
float: none;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 13px;
padding-top: 0;
width: 260px;
}