Morning everyone , I have an issue , it's not because the padding not follow the responsive device , it's because it's follow responsive . So I use tailwind as my framework for the project , to be honest , it's my first time using tailwind and have little to no experience with tailwind .
So my problem is I want have big image in my header , like this the orange , dark blue are image for my hedaer
But due to lack of experience , I do this in my code
<div class=" bg-no-repeat z-10 static" style="background-image:url(URL of the big image) ;">
<img class="hero" src="image in the big image , it's company logo" alt="">
<img class="z-[-10] absolute top-0 right-0 h-full" src="building image on the right side" alt="">
</div>
and for class hero , this is my css code
.hero{
padding-top: 15%;
padding-left: 10%;
padding-bottom: 115%;
}
I use padding to make the image load bigger and if I didn't input enough padding , the image will not load perfectly , like it's has been cut at the bottom
I do that as my temporary solution but if it works no need to fix it . As what I say , the problem come when I need to make the website responsive , so if I use mobile or tablet , the padding will shrink and the image will look awful , it's like has been cut at the bottom .
I need better alternative than just "adjusting padding" , so guys , do you have a idea ? I need the image stay in full , phone and other small device is not exception , and it have logo (company image/company name) inside or above the big image .
Related
So I have been trying to display posts to a page using tailwind css cards, at mobile view I still want the cards to be full width and posts images displayed beside just as in desktop view
the code example looks like this one below:
<div class="max-w-md bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl m-6">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:h-full md:w-20" src="...">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
Finding customers for your new business
<p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
</div>
</div>
</div>
First of all you need to use media query to modify the tailwind default setting of your card.
create a css file and connect it to your html or if you already have it you need to
consider few things about screen sizes.
In what width range do smartphones/tablets come in? probably 768px is the max size of a tablet in common?
what is the card class name in this case its, "max-w-md" but I prefer you to use id for selecting it.
write this code in your css file
#media(max-width: 768px) {
.max-w-md {
max-width: 100vw !important;
}
}
lets understand line by line whats going on here.
we are setting the max-width of devices that comes in the range of 768px
we are selecting our card class .max-w-md (we are trying to override the setting of tailwind css which has this class "max-w-md" max-width to 100vw(100 viewport) means it will not care what the parent width or height is, based on the viewport size(the portion on which you see websites, the whole document ) according to that it will set the width when the screen width is 768px upto that your card will be 100% of the page where you see html.
you can go the developer tools in your browser and go to elements tab and then select your main card, look for this div this div is your class that you want to select to see its css
and on the styles tab on the right or bottom corder type width or max-width on the filter it will give this code
this is the tailwind css default setting for max-w-md class
So currently I'm using Bootstrap's grid system and a simple card. In the card, I render dynamically the background image. Think of the Instagram grid system. Everything works fine, except that once I go below a defined column width, the card resizes it to maybe 10% of its original height and the image is barely visible.
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="card" style=" min-height: 100%; min-width:
100%;background-image: url('<%= rails_blob_path(post.images.first)
%>'); background-position: center; background-size: cover;">
</div>
</div>
</div>
col-md-4: Everything nice as excepted:
Below col-sm-4 (or md, doesn't really matter, once it drops below the last defined col class it starts to look like this):
As you can see, once I scale the width of the browser down, it just snaps the height of the card to the second image.
Is it possible to resize the card in the second picture to fill the height, without messing around with the heights of the other cols? Adding "min-height: 200px;" will fix this issue, but it will also mess with the other col widths and make them appear stretchy.
Sorry if that's a basic question. I found a few posts but I couldn't fix it at all and normally backend, just trying to understand Bootstrap better.
Using "background-size: contain" will make it so that your images don't stretch and are fully visible, but you are still stuck with setting a min-height, which won't mess with your col widths so you don't have to worry about that. Consider using an img tag instead of divs with backgrounds though as they will size based on the image, whereas the image sizes itself with the div when you use divs w/ backgrounds
Cheers,
Ethan
So i came up with a solution, thanks everyone for your input. Just in case someone else runs into this problem:
Heres the working solution:
<div class="card h-100">
<%= image_tag(post.images.first, class:
'img-responsive', style: "width: 100%; height:
100%;")%>
</div>
I tried this before, but the cards were unequally in the height and the images were not really full width/height. The key is here to set the card to h-100 so that the card height is equally. Then, stretch the image in width&height too 100% and use img-responsive. This way, the image scales nicely together with all col widths.
Greetings!
I'm freelancing for a company and came across an issue I can't figure out.
I don't really want to post the URL to the page but I'll try explain as best I can.
The company is using foundation framework inside Magento.
They have 2 column side by side layout Text / image - then image text etc.
The div code is this
<div class="columns small-12 medium-6 type-h tile tile--one medium-push-6" data-equalizer-watch="" style="height: 385px;">
<img class="tile__image tile__image b-lazy b-loaded" src="image-url">
</div>
The main issue is this
data-equalizer-watch="" style="height: 385px;"
On mobile view this height changes randomly from 385 to over 570px depending on screen size. What this is doing is leave a large white space below the image as the image is only 385px in height.
I can't control the div from expending to this size.
I've tried using the important tag to force a max-height but can't.
I don't have access to the source code. Just the page in question inside Magento.
If you dont want it to affect mobile just add this.....
data-equalize-on="medium" to the surrounding div with data-equalizer on it
How can i make slide photo full size for phones ?
Here have i link of my website: Ekizceliler
if you watch it website with phone then see you the slide picture very huge, how can i make the slide picture in good size?
to make a responsive slider , in your css make the main div
width : 100vw;
height : 50vh ;
/* you can change height as you want */
background : cover ;
<div class="flexslider top_slider" style="height:32vh;width:100%">
this might give you a temporary solution, but due to accesibility, I would recommend you to:
Use a slider for an entertainment value, so avoid text in it
Maybe it is a better idea, to use a media query to hide the slider on mobile devices, because even if you manage to resize them, you will always lose a lot of quality, and in the end, texts are so small, you can't read them anymore. If those pictures are required for your purposes, try to put them on a page, that way your visitors will pay more attention to them.
I've tried to replace the brand text with an image as you can see in my example index page. But, this causes the nav to break into two lines with the logo image on its own line. How can i fix this? Here is the the page that shows the problem:
http://www.clearsoftinc.com/Clearsoft/public_html/index.html
And here is the page that shows what it was supposed to look like (before i changed text logo to graphic logo).
http://www.clearsoftinc.com/Clearsoft/public_html/about.html
This I believe is causing the problem.
<img src="img/new_logo_white.png" width="15%" alt="Clearsoft Home">
The width attribute is causing it to expand more than it should. Remove it and use css width and you should be good to go.
.logo{
width: 95px;
margin-top: 15px;
}
Working example:
http://jsfiddle.net/N2nGQ/
I simply used this:
<a class="navbar-brand" href="#"><img src="http://www.clearsoftinc.com/Clearsoft/public_html/img/new_logo_white.png" style="width: 50px; height: 20px;" /></a>
To get this working on your site too, you must add the 'navbar-brand' to the a tag.
Don't use width="%15" on your image. Instead, resize the image to the size you want it and use the smaller image (in your case it would be 112 x 25). The wrapping <div class="navbar-header"> is making room for a 744px wide image, but then on your <img> tag you are scaling it down to 15% of it's original size.
See this screenshot: http://imgur.com/f2xkO1f
Plus, its just a bad idea because the site still has to request and download the large file then resize it. It would make your site faster if you just make a smaller image yourself and reference that one with the smaller size.