-
Posts
-
Hi, I am trying to get margins within cells that have a text block in them to display well in both desktop and mobile devices. At the moment if I increase the margin in the cell so that it is visually satisfying on a desktop the the margin displayed on mobile devices is too big resulting in the text lines being too short.
This code has been suggested;
.flex_column {
padding: 8% !important;
}Do you think it will work?
Is it good (safe to use) coding?
Or can you give me other coding that will work?Cheers
NigelHey taoleo,
Could you please give us a link to your website, we need more context to be able to help you.
You can use media queries so that this code will only work for desktop screen sizes.
Here is a link for you
https://www.w3schools.com/css/css3_mediaqueries_ex.aspBest regards,
VictoriaHi,
Firstly I may have used the wrong term. I may have meant padding rather than margin. I’m referring to the space between the text and the side of a column as can be seen on this page; https://www.writeyourjourney.com/vietnam-writing-retreat/
Please see the column that starts with the text…’Ready for a creative vacation of a different sort?’The issue is: If we increase the padding so it looks good on a desktop then it looks bad on mobile. Please refer to the same cell on a mobile device.
We are hoping that there may be a short code that will allow the padding to appear good on both desktop and mobile devices.Cheers
NIgelHi NIgel,
Using media queries you can specify different values for the desktop screen sizes and mobile.
What code are you using? Let us help you with that.
Best regards,
VictoriaHi Victoria,
I did look through the media queries however being unfamiliar with them I was unable to see one that would suit my purpose.
I don’t believe it is screen size that is the issue, it is padding within a cell that needs dealing with.
Did you look at the site on desktop and mobile to see what I was referring to?Cheers
NigelHi Nigel,
Yes, you say that increased padding looks good on the desktop and not on mobile. I’m saying that with the help of media queries you can have the padding you like and it will not affect smaller screen sizes.
https://cl.ly/fa4906535e6f Do you mean that you want more padding here?
Best regards,
VictoriaHi Victoria, Yes the screen shot you sent is a good example.
I understand that media queries can be used however being unfamiliar with them i was unsure of which one to use as none of them seemed to relate to my situation. If I am to adapt the coding of one of them to suit my needs I wouldn’t know how to do this.
However I an willing to try. Which media query would use suggest for me to use?
Once I have the coding sorted is it then used as short code?Cheers
NigelHi,
You can use it by creating a function that call the shortcode.
Now how to code it, the size depends on what you are going to use and what screen you want to target…Best regards,
BasilisHi,
Thanks for the reply.
I can see that media queries would work however none of examples apply to my situation and I guess if I knew how to code then I would do it. However I do not know coding and this is why I was approaching you people in the hope that you can suggest some.Cheers
NigelHi Nigel,
https://cl.ly/99a8709bcddd This is an example of the media query in action.
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 767px) { .responsive #top #wrap_all #av_section_2 .flex_column { padding: 20px 30px !important; } }If you need further assistance please let us know.
Best regards,
VictoriaHi, thanks for the coding however it made no difference to the padding.
I tried it it both as css shortcode and then in custom.css as suggested.Hi,
Did you try adding the code to the very top of quick css so it runs first? Also be sure to clear your cache a few times over.
Best regards,
Jordan Shannon
- The topic ‘Cell Margins’ is closed to new replies.