-
Posts
-
Hi guys,
Ii have a question about this page.
https://www.testdnsemanon.nl/peoplestock/
I adjusted the padding of the first block (the part with the PeopleStock heading and the picture with three humans on it) so it aligns with the other text blocks on the left side of the website. It looks good! Like this:
https://img.savvyify.com/images/2023/06/22/Screenshot-iMac-215-inch.png
However… when viewed on my MacBook Pro 13 inch, the text column becomes to small:
How can I solve this? I the padding, on a smaller screen, to be smaller so the text column will be wider.
Hey AlfredoS,
Please try this in Quick CSS:
@media only screen and (min-width: 768px) and (max-width: 1200px) { .flex_cell.av-laqxiq82-e5afa9e1a4c481ed474fb7d1362933c3 { padding: 30px 140px 0 230px; } }You can change the media query to your liking. Change the min-width value to change the lower end screen resolution, and max-width for the maximum width it should apply. The padding has not been changed, so you would have to alter those values as well. They are in top-right-bottom-left order.
Best regards,
RikardHi Rikard,
Thank you for your reply. I’ve tried, but I can’t solve it. Can I share the login details with you so you can look at it?
Greetings,
Alfredo
Hi,
Yes, please do. Also let us know which screens resolutions you would like to target.
Best regards,
RikardHi Rikard,
Hereby the credentials.
Oh dear. I find that quite difficult. The resolution of my MacBook 13 inch is 1280 x 800px, but I suspect it doesn’t look good on tablets either. I have therefore now adjusted the full-width breakpoint to 989px. That already helps a lot. To be honest I don’t have enough knowledge about it. What strikes me is that when I resize my web browser, the left padding (230px) remains the same, making the column too narrow and the text no longer aligns. That is actually the case until the blocks are placed under each other (mobile). Anything between 989px and 1390px width doesn’t really look right roughly. Should I perhaps fill in percentages instead of pixels for padding?
Hi,
Thanks for the update. You can try percentages yes, it might work. You could also try to duplicate the element and only show the new one on tablet and mobile sized screens, then remove the padding from the new element. You can select the visibility in the Advanced tab in the element options.
If you should find that it’s still not looking good after that, then please let us know which screen sizes you would like to target, and we’ll try to adjust it for you.
Best regards,
RikardHi Rikard,
Thank you for your response. I tried percentages and it worked. But when I adjust the percentages again and I refresh te page on my 13 inch, the green background and the picture disappears. This happens only on my 13 inch MacBook Pro. I thought it had to do with my laptop because the page looks good on my 21 inch iMac. But on my wife’s 13 inch laptop it’s the same problem. As soon as I do more adjustments the problem occurs.
https://img.savvyify.com/image/AmMO
Here’s the page once again: https://www.testdnsemanon.nl/peoplestock/
I updated the Enfold theme and reïnstalled WordPress to see if that was the problem. I also removed some code in Quick CSS that was related to this part of the site but It hasn’t worked. Can you help me out because basically the problem with the padding is fixed. Its just this strange problem.
Hi,
Thanks for the update. I checked your site, but I can’t reproduce the results shown in your screenshot at any screen widths. In which browser are you getting those results? Please make sure to test in an incognito/private browser window also.
Best regards,
Rikard
- You must be logged in to reply to this topic.