Hi!
The thing is that by reducing the screen, the font does not change. And I would love to. At one point, it jumps to mobile display, but the font is too small in the beginning. That is, I would like to do the same with a mobile device - to always fit a certain frame. How can I achieve this?
could you shre the url of your store so that i can have better look into this.
https://parfumerija-amour.myshopify.com/ (pass: flohld)
Please follow these steps:
@media only screen and (min-width: 1200px) {
.hero__title{
font-size:4.2vw !important;
}
}
@media only screen and (min-width: 768px) {
.hero__title{
font-size:3.5vw !important;
}
}
@media only screen and (max-width: 768px) {
.hero__title{
font-size:5vw !important;
}
}
The first part is great, now the text is not always the same size. The only thing that bothers me about the desktop device is that I have to move the bottle to the left so that the text doesn’t cover it. By how many px do I have to move the bottle to the left in the original image? But how else to arrange it?
With a mobile device, the text is too small for me at 768px, a large gap appears. How do you fix that?
Thanks!
Add this further
@media only screen and (min-width: 768px) and (max-width: 1200px){
.hero__image{
object-position: 43% 50% !important;
}
}
@media only screen and (max-width: 768px) {
.hero__text-content {
padding: 100px 0 15px !important;
}
}
, but remember to update these value if you update the image in the future
Great! Only on a mobile device is the text still too small at the beginning and too large at the end. Is that how to fix it?
But I didn’t understand exactly what you meant by that: " but remember to update these value if you update the image in the future"
up!
Hi @tomm1p
In order to check for responsiveness, its usually done clicking on specific device screen sizes (just click on the reponsive dropdown), which are available with every browser as well, it’s very complicated to do responsiveness for every pixel change.
For second part I said that as we have moved the image to the left on desktop, this correlates to this particular image and its text, if you change the image (of a new dimension) and text, we would again need to adjust the above values.
I went to look at the page on the iPhone 13 Pro and it showed me, just like in the picture. I would like the text to be a little higher so it doesn’t overlap the product. Is this possible? Where can I see how the page is displayed on tablet?
Thank You!
@ProfitLabs I also looked at what it looks like on other devices. And with some devices, the text is either too big or too small. Is it possible to fix it? Not good with my Iphone 13 Pro either.
Hi @tomm1p
in firefox I could see your text looks fine on all the major devices,(if it works on major apple and latest android ones then its fine) only thing is we moved the text bit lower as you asked , this should be removed. as the case you mentioned was a random responsive screen aspect ratio not a proper device. Please remove the following code
@media only screen and (max-width: 768px) {
.hero__text-content {
padding: 100px 0 15px !important;
}
}
for any further assistance please contact me directly here at [email removed]