The is an img surrounded by a couple of divs. it look fine on my windows pc on different browsers, it is great on my phone. However, on apple devises it stretches to huge length. Even if i go to my website though google chrome on iPhone it is still stretched.
Also I al using bootstrap. So some classes are coming from there.
<div style="width: 80px" class="mx-auto" id="about-link">
<a href="#about-link">
<p class="text-center" style="color: black; margin-bottom: 0; padding-bottom: 0.6rem; margin-top: 4rem; text-decoration: none; ">О нас</p>
<div class="w-100" style="display: flex; justify-content: center;">
<img style="width: 40px; height: auto; max-height: 100%;" src="img/icons/down.png">
</div>
</a>
</div>
No other css used. Only the one embedded into my html.
I am thinking maybe it's something to do with what apple OS is based on. Because if not - then why would it still not work on google chrome on apple devises...?
Thank you.
Related
I made a mobile navigation and the menu displays differently in chrome / edge dev tools than it does on actual mobile devices. (See Below). I have used every phone in dev tools mainly the iPhoneX. I have tested it on a iPhone XS max and iPhone 12 Pro max.
Dev Tools
Dev Tools
Mobile Devices
Mobile Devices
.nav {
display: none;
flex-direction: column;
width: 100%;
padding: 10px 0;
text-align: center;
line-height: 40px;
background-color: $darker-blue;
border-radius: 5px;
margin-top: 125px;
position:absolute;
}
<!-- HEADER SECTION -->
<header class="header">
<div class="container">
<div class="header-content">
<div class="header-img">
<img src="img/cglogo.png" alt="Logo" height="50px" width="50px">
</div>
<div class="nav" id="nav">
Home
My Work
Blog
Contact
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i style="color: #e7e7e7;" class="fa fa-bars fa-2x" id="bars"></i>
</a>
</div>
</div>
</header>
Sometimes devtools will mess up, but its important that on a real phone the page looks normal, happened to me a lot of times i just check it out via my localhost and it looks fine, don't stress about it.
Dev tools responsive size isn't as much as reliable as with the real mobile devices. I recommend having a mobile emulator and open your deployed website. Rely on devtool if you just want to see if your website is generally responsive but have it inspected in real/emulated mobile device. The view height of the devtool(which displays a full view) is significantly different as with what mobile devices display(also display navigation bar of the mobile and the notification and url bar of the mobile browser)
.
I began designing a mobile first website. First ever paid website!! I'm not using Bootstrap until I master flexbox, so don't say use bootstra//templates :) I'm having problems as my site looks good when viewed mobile, but looks like crap when viewed on a large screen.
A specific problem I'm having is a 2x7 row/column grid, the words spill out of the container, but fit fine with mobile view on.
This is not specific to chrome.
How do I make flexbox mobile friendly? Is it simply flex-grow/shrink? I find it odd that my divs need to shrink as the screen gets larger, and they def shouldn't get any bigger..and If I make the white portion of the div a larger VH it will also "fix" it. But that seems counter-intuitive...On a bigger screen I must make the container an even greater % just to fit the same size font??
Or is this a media query thing...and if so what would it be? Media Query's making fonts smaller seems wrong, I'm looking for the best way/best practice not a work around if possible :)
MY CODE:
HTML5:
<div class="s2-row" >
<div class="s2-columns center">Talent Management</div>
<div class="s2-columns center">Athlete & Artist Development</div>
<div class="s2-columns center">Booking Talent</div>
<div class="s2-columns center">Negotiating Booking Rights</div>
<div class="s2-columns center">STravel Logistics</div>
<div class="s2-columns center">Sound</div>
<div class="s2-columns center">Lights</div>
<div class="s2-columns center">Backline Equipment</div>
<div class="s2-columns center">Venue Selection</div>
<div class="s2-columns center">Event Set-Up & Contracting</div>
<div class="s2-columns center">Sponsor Mangement</div>
<div class="s2-columns center">Promotional Negotations</div>
<div class="s2-columns center">Complete Event Presentations</div>
<div class="s2-columns center">Rider Requirements</div>
<div class="s2-row2 center">As well as many other event specific
needs</div>
</div>
CSS3:
div.s2-row {
display: flex;
flex-wrap: wrap;
line-height: 2;
text-align: center;
margin-bottom: 50px;
}
div.s2-columns {
flex-basis: 50%;
}
h3.s2-row2 {
text-align: center;
width: 100%;
margin-top: 15px;
font-weight: 600;
font-size: 30px;
}
.center {
align-self: center;
}
Desktop View
Mobile View
Thank you in advance!
(2nd pic is how it looks on mobile)
I settled with simply making the container elements vh bigger. I think I could've messed with flex-shrink/grow or media queries as well but I kept it simple.
I'm trying to make my code
<div style="margin-top: 120px; margin-bottom: 10px; margin-left: 250px; text-align: center;">
<img width="420" height="42" style="vertical-align:middle;" src="https://i.imgsafe.org/52c5068376.png" alt="PAF ENTRY">
</div>
appear in the middle of the screen on both browser and mobile so it works on both, since when i try to go to my webpage on mobile it doesn't show up since it's not right in the middle. if that isn't possible a way to make two versions of the code 1 mobile only view and 1 browser only, since everything I've searched for this doesn't work.
link to the page: http://pafclub.bigcartel.com/entry
I'm developing a web site using bootstrap frame work. but I'm new to it. so i create some dives using default style classes and it is working responsively.
but the problem is I don't know how to give sizes for images or some divs because default things are not fulfill my requirenment always.
ex:
<div class="col-sm-6 col-md-4">
<div class="thumbnail" style="background-color: #555658; min-height: 350px;">
<div style="font-size:24px; margin-top: 10px; margin-left: 10px; font-weight: normal; font-family: sans-serif; color: #fff;">Connect with Us</div>
<div class="caption" style="color:#dddddd;">
<img src="images/w9.png"/>
</div>
</div>
</div>
how to set width and height to img ? What should i use % or px ?
thank you.
Do not use inline CSS. It is bad practice.
In order to override default properties of, say, .thumbnail define a CSS class like this:
.thumbnail.my-custom-thumbnail {
width: 400px;
height: 300px;
// etc
}
.thumbnail.my-custom-thumbnail has a higher specificity compared to .thumbnail and any rules you define inside it will override rules defines in .thumbnail.
Also consider posting live examples for your CSS/HTML questions via JSFiddle or a similar web site.
To learn more about specificity in CSS, please read here.
<img src="images/w9.png" style="width: 400px; height: 200px;" />
or
<img src="images/w9.png" style="width: 70%; height: 35%;" />
or
<img src="images/w9.png" style="width: 400px; height: 35%;" />
or you can even do
<img src="images/w9.png" width="400px" height="200px" />
or
<img src="images/w9.png" width="90%" height="80%" />
Try to add the grid classes to image if you want it to be responsive, like <img class = "col-sm-6" src="images/w9.png"> or do as AlienArrays said
Here's my html
<div id="contentBox" style="margin:0px auto; width:100%">
<div align="left" id="column1" style="float:left; margin:0; width:37%;">
<ul class="tmo_list">
<strong>
Commercial Buildings<br><br>
Shopping Centers<br><br>
Dumpster Pads<br><br>
Decks & Patio<br><br>
Store Fronts<br><br>
Restaurants<br><br>
Drive Ways<br><br>
Awnings<br><br>
</strong>
</ul>
</div>
<div class="wrapper">
<img src="images/pressurewashing.jpg"/>
</div>
<div align="right" id="column3" style="float:right; margin:0; width:37%;">
<ul class="tmo_list">
<strong>
Office Buildings<br><br>
Business Signs<br><br>
Loading Docks<br><br>
Rust Removal<br><br>
Wood Fences<br><br>
Gas Stations<br><br>
Bus Stops<br><br>
Homes<br><br>
</strong>
</ul>
</div>
</div>
Here's my css
.wrapper img {
display: inline-block;
max-width: 100%;
height: auto;
width: auto;
}
I've been reading a few tutorial's
mainly
http://www.fredparke.co.uk/blog/using-max-width-resize-images-dynamically
and
How can I resize an image dynamically with CSS as the browser width/height changes?
and
How to dynamically resize image in css?
with no luck, I'm tired of changing things... so frustrating, what I get is the image superimposed over column3, but never does the image resize...
It does resize, Here is the fiddle, http://jsfiddle.net/TCdsK/
What browser are you using? I tried in mozilla and chrome.
Also make sure you have a large sized image, If you have a small image, your css wont stretch, here is the fiddle with the small image
http://jsfiddle.net/TCdsK/1/
here is the 3 column layout you are looking for
http://jsfiddle.net/TCdsK/3/