I'm having trouble getting this guitar I have built with CSS to be responsive. I would like the body of the guitar and the neck to remain static and just get cut off as the screen resizes. However I am unsure how to do this as I am using flexbox to lay it out. If anyone has any suggestions I would greatly appreciate it.
CodePen Link
/*I was required to post this code please see the link above*/
body {
background-color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.guitar {
margin-top: 1px;
border: 2px solid #3A434A;
background-color: #EDEDEE;
height: 300px;
width: 90%;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
Well, there's no huge differences about using flexbox or not to create responsive things. So you just need to write appropriate rules for mobile view. It's possible to do with #media
#media screen and (max-width: 768px) { /* your code for mobile here */ }
It's not clear to me about what actually you trying to achieve for mobile view. It would be nice if you could provide a screenshot or so that will represent what's on your mind ;)
Related
I have 2 text boxes in a css flexbox. Left side is a tagline and right side is a brief summary. I am trying to have them display on a webpage side by side in the center of the page for desktops only (i.e. min width 1024px) but let these boxes stack up below that breakpoint (i.e. on tablets, phones with widths below 1024px). The challenge here is that both of these text boxes combined cannot exceed 50% of the width of the page (horizontally). Right now, when expanding screen size, the text stretches to the ends of the screen. I tried many different fixes and nothing I tried worked properly!
My HTML Code:
<div class="info-block">
<div class="info-item">
<div class="info-col">
<h4>Modern Approach, Innovative Solutions, Accessible Support</h4>
</div>
<div class="info-col">
<div class="info-text">We approach problems with holistic and practical solutions, each and every time.</div>
</div>
</div>
</div>
My CSS code:
.info-item {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
margin: 0;
}
.info-item:last-child {margin: 0;}
.info-col {
width: 46.6%;
font-size: 24px;
}
.info-col:first-child {
text-align: right;
}
.info-text {
margin: 0 0 20px;
font-size: 24px;
line-height: 115%;
font-weight: 200;
}
#media screen and (min-width: 1900px) {
.info-text {
margin-right: 200px;
max-width: 420px;
margin-top: 5px;
}
.info-col {
max-width: 420px;
}
Any help or suggestions would be greatly, greatly appreciated!
Easy. Add this to your CSS:
#media screen and (max-width: 1024px) { /* If screen size is maximum 1024px */
.info-item {
flex-direction: column; /* Set the flex direction to */
}
.info-col {
width: 100%; /* Setting width to 100% */
}
}
To keep the items centered, you need to set the width to 100% while you stack the columns on smaller screens.
I'm looking for an help with a little challenge (for me a big one): I need to center align the logo of this header ( https://mastercanapa.com/ ) on mobile version... I tried every solution found online, but nothing helped. Someone can help me with this?
Add to your css or style tag:
#media (max-width: 620px) {
.btLogoArea {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
}
.btMenuVertical .btLogoArea .logo {
float: none;
display: inline-block;
}
}
Normally mobile design visible when browser width lower then 768px, but in your website mobile design visible when browser width lower then 1200px. So just add below CSS in your style.css file.
#media (max-width: 1200px) {
display: flex;
justify-content: center;
float: none !important;
}
Try this i hope it'll resolve your issue. Thanks
My footer icons are smushed vertically on ios. Once i rotate the phone they're fine, I've checked the aspect ratio and such on my browser dev tools and it works fine...just not on ios in vertical view. Again, they look fine when I rotate the phone, just not in vertical.
Any idea why this would be? I'm assuming it is in one of my media queries, I'll include a couple that could possibly be of concern.
I would seriously appreciate your help if you have some to offer!
I've tried using the XCode dev tools to spot the issue, didn't solve anything.
// Parent to imgLink
const SocialDiv = styled.div`
height: 100%;
width: 300px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
align-self: flex-end;
#media only screen and (max-width: 660px) {
width: 250px;
}
#media only screen and (max-width:497px) {
width:100%;
}
`
// Child to Social Div
const imgLink = styled.a`
height: 100%
width: 25%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0;
margin-bottom: 0;
align-self: center;
#media only screen and (max-width: 525px) {
width: 15%;
margin: -3%;
margin-top: 0;
margin-bottom: 0;
}
#media only screen and (max-width:497px) {
width: 25%;
justify-content: center;
margin: 0;
}
`
// Child to imgLink
const Img = styled.img`
height: 100%;
width: auto;
`
The expected outcome is a 1x1 aspect ratio, right now i'm getting about 2:1 horizontally.
Found it, I had height: 100% where I definitely should have had a fixed amount. Fixed my issue!
For anyone reading this in the future, just make sure you have a media query specifically for the phone size.
I'm trying to practice HTML & CSS by recreating templates and I'm having a lot of trouble with the height of the image inside the thumbnail.
You can see here: https://codepen.io/broccoliman/full/rpEePL/
.desttwo{
margin-bottom: 30px;
}
.dest-card{
width: 320px;
/* height: auto; */
margin-bottom: 90px;
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.30);
}
.dest-card__image{
max-width: 100%;
/* height: auto; */
}
.destinations{
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.flex-card{
max-width: 1100px;
display:flex;
justify-content: space-around;
flex-wrap: wrap;
padding-left: 20px;
padding-right: 20px;
}
#media only screen and (max-width: 800px){
.flex-card{
flex-direction: column;
align-items: center;
}
.dest-card{
width: 100%;
}
.dest-card__image{
width: 100%;
}
}
#media only screen and (min-width: 801px) and (max-width: 1099px){
.flex-card{
flex-flow: row wrap;
justify-content: space-around;
}
.dest-card{
width: 45%;
}
.dest-card__image{
width: 100%;
}
}
The main problem is that in the first section the photos maintain the aspect ratio and still look crisp as I resize the browser window, but they're not all the same height.
In the second section I use inline styling with width and height so that they keep the same height but the pictures get distorted as I stretch the browser.
I tried wrapping the images in a div and doing overflow:hidden, but no luck.
How do I go about this?
Follow up questions about image dimensions
All of the photos that I used contain different image dimensions. Am I supposed to crop these images before using them to all have the same dimensions?
Also I read on internetingishard.com that inline styling an image width or height for content purposes is one of the rare cases where you'd use inline styling, but am I using it wrong in this case? Should it match the actual dimensions of the image and not match the dimensions that I want that element to be?
try below for your image section
.dest-card {height: 250px;}
.dest-card img{
height: 100%;
width: 100%;
object-fit: cover;
-o-object-fit: cover;
}
I have the following HTML table and associated CSS - http://jsfiddle.net/67LE7/
I believe this is the CSS that is causing the problem
.content {
position: relative;
max-width: 944px;
min-width: 200px;
margin: 0 auto;
display: flex;
justify-content: center;
}
When I expand the Result window horizontally, the first column expands infinitely and pushes the second and third columns to the next row. The intended result is for all three columns to maintain a fixed size and appear on the same row. What am I doing wrong?
you need to set a fixed width pricing table and remove the media queries. The media queries are resetting the widths. The media queries will make it look nice on phones and tablets, but if you do not need that...
updated fiddle
.pricing-table{
width: 150px;
/*#media (max-width: 768px) {
.pricing-table{
width: 48.9%;
}
}
#media (max-width: 480px) {
.pricing-table{
width: 100%;
margin: 0 0 10px;
}
}*/