Tagged: enfold
-
AuthorPosts
-
February 23, 2021 at 1:36 pm #1283081
Support,
Only on mobile (iPhone) with both Chrome and Safari in ‘portrait’ orientation, the phrase “Risk Management” looks like this:
“Risk
Manageme”On both of these pages:
https://wjcousinsandassociates.com/services/
Secondly, there is also much more space below the red line (under “OUR SERVICES”) than there is on iPad and Desktop.
Thirdly, again on the iPhone in ‘portrait’ orientation, the space above the picture of the third blog done is much less than there is above the second blog picture.
Thanks for your help.
Mark Besh
Visual Impact SystemsFebruary 23, 2021 at 8:24 pm #1283215Hey mbesh,
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) { #top.home #av-layout-grid-1 .avia-builder-el-8, #top.home #av-layout-grid-1 .avia-builder-el-11, #top #av-layout-grid-1 .avia-builder-el-5 { display: none; padding: 0 !important; } #top h3 a { font-size: 18px; text-transform: none; } .responsive #top.postid-25 #wrap_all .flex_column { margin-bottom: 0; } #top.postid-25 .content { padding-bottom:0; } }
If you need further assistance please let us know.
Best regards,
VictoriaFebruary 24, 2021 at 3:55 pm #1283424Victoria,
Thanks for the response and the code, however, after putting the code first into the quick CSS, then in the custom CSS file, neither worked (and I cleared both the Wp-Rocket and GoDaddy caches):
https://wjcousinsandassociates.com/services/
It just seems not to work properly in portrait orientation (and I checked it on 3 different iPhones and three different browsers).
Thoughts?
Thanks for your help.
Mark Besh
Visual Impact SystemsFebruary 24, 2021 at 6:54 pm #1283499Hi mbesh,
Could you please attach some screenshots of how you’re seeing it? Also, you can change this max-width: 767px to max-width: 989px.
If you need further assistance please let us know.
Best regards,
VictoriaFebruary 24, 2021 at 7:34 pm #1283513Victoria,
Changed both instances to 989, flushed both caches, and it did not change anything—it is still ‘chopping off’ the end of “Management,” the spacing below the red line is still huge and there is no spacing above the third blog post pic (like there is above the second blog post pic).
http://visualimpactsystems.com/WJCousinsAndAssociates-HomePage.JPG
http://visualimpactsystems.com/WJCousinsAndAssociates-ServicesPage.JPG
http://visualimpactsystems.com/WJCousinsAndAssociates-BlogPage.JPG
(Pics of iPhone 8 with iOS 13.5.1)
[ Other more up-to-date iPhones with the latest iOS also show the same thhing].Thanks for looking into this for us.
Mark Besh
Visual Impact SystemsP.S. Custom CSS file below…
============
/* Have fun adding your style here :) – PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */
/* General Custom CSS */
/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */@media only screen and (min-width: 768px) {
/* Add your Desktop Styles here */}
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */@media only screen and (max-width: 989px) {
/* Add your Mobile Styles here */}
@media only screen and (max-width: 989px) {
#top.home #av-layout-grid-1 .avia-builder-el-8,
#top.home #av-layout-grid-1 .avia-builder-el-11,
#top #av-layout-grid-1 .avia-builder-el-5 {
display: none;
padding: 0 !important;
}
#top h3 a {
font-size: 18px;
text-transform: none;
}.responsive #top.postid-25 #wrap_all .flex_column {
margin-bottom: 0;
}
#top.postid-25 .content {
padding-bottom:0;
}
}February 26, 2021 at 6:48 pm #1283929Hi mbesh,
Best regards,
VictoriaFebruary 26, 2021 at 7:55 pm #1283967Victoria,
Thanks for checking this out on your phone. Yes, it is working on my iPhone now, too. [ I’m thinking it was the WP-Rocket cache that is set to “officially” flush every 10 days (in the plugin setup), even though I used its “Flush Cache” feature multiple times ]. (Maybe it is the ‘interaction’ between GoDaddy’s Sucuri cache and WP-Rocket’s cache). Hmmm. Thanks.
Now, on the “Services” page (only on the iPad), the “Our Services” pics are not as big as the ones on the Home page and are left-justified. Can you help me make them center justified and the same size as they are on the Home page? [ You can see this happen by making the width of the browser window on the Desktop smaller and smaller, and when you get small enough, it ‘jumps’ to left-justified (which evidently ’emulates’ the iPad width), and then back to centered when you get a bit smaller (’emulating’ mobile width then?) ]. [ *** I noticed that this happens when the menu goes to Hamburger ]
https://wjcousinsandassociates.com/services/Also, can the text size of the “WJ COUSINS AND ASSOCIATES IS A CANNABIS SECURITY…” text block and the “WHY US?” text block below on the Home page be smaller in size (maybe 75% size) when viewed on Tablet and on Mobile? (Desktop size is okay).
Note: The space above the third blog pic (on the phone only) still does not have the same space above it as does the second blog post pic.
I REALLY appreciate all your help on this!
Mark Besh
Visual Impact Systems- This reply was modified 3 years, 8 months ago by mbesh. Reason: *** I noticed
February 26, 2021 at 9:17 pm #1284004Hi Mark,
Please change the code I gave you to this:
@media only screen and (max-width: 767px) { #top.home #av-layout-grid-1 .avia-builder-el-8, #top.home #av-layout-grid-1 .avia-builder-el-11, #top #av-layout-grid-1 .avia-builder-el-5, #top #av-layout-grid-1 .avia-builder-el-8 { display: none; padding: 0 !important; } #top h3 a { font-size: 18px; text-transform: none; } .responsive #top.postid-25 #wrap_all .flex_column { margin-bottom: 0; } #top.postid-25 .content { padding-bottom:0; } }
If you need further assistance please let us know.
Best regards,
VictoriaFebruary 26, 2021 at 11:27 pm #1284019Victoria,
Thank you VERY MUCH for being so patient with me on this (our client is a real ‘stickler’).
I changed your last code to a max-width of 989, so the picture boxes are larger (like last time). Now, would it be possible to make them a bit smaller on the Services page (and we might as well match the sizes on the Home page), to ‘line up’ with the outside ‘edges’ of the “Hero” pic and the outside of the text ‘box’ below?
https://visualimpactsystems.com/P1270765.JPG
https://visualimpactsystems.com/P1270766.JPG
[ Kind of like this, when you reduce the desktop browser a bit less than tablet width: http://visualimpactsystems.com/Screen%20Shot%202021-02-26%20at%204.04.06%20PM.png ]Would it also be possible to make these pics into one ‘column’ instead of the current two columns ONLY in ‘portrait’ orientation and ONLY on the phone?
https://visualimpactsystems.com/P1270760.JPGThen, for whatever reason (and I have been clearing ALL caches), there still is no space above the third pic on the Blog page ONLY on the phone and ONLY in ‘portrait’ orientation.
https://visualimpactsystems.com/P1270761.JPGAgain, I really appreciate all your effort on this.
Mark Besh
Visual Impact SystemsMarch 4, 2021 at 6:32 pm #1285485Victoria,
Any thoughts on how to solve the latest issues yet?
Mark Besh
Visual Impact SystemsMarch 7, 2021 at 11:46 am #1286171Hi mbesh,
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: 989px) { #top .no_margin.av_three_fifth.avia-builder-el-6 { padding: 30px 50px 0 !important; } }
If you need further assistance please let us know.
Best regards,
VictoriaMarch 9, 2021 at 2:00 pm #1286722Victoria,
That worked great for the “Services” page (they ‘line up’ with the edges of the Hero pic). Thanks. [ So, I then just changed the “el-6” to “el-9” to make this ‘grouping’ match up on the Home page ].
So now, would it be possible on both the “Home” page and the “Services” pages that when this ‘grouping’ of 4 items is viewed on a phone—only in portrait orientation— could they be only one item ‘wide’ (a ‘column’ that has each item stacked on top of each other — as it works on our site using Angular: https://visualimpactsystems.com/ ).
ALSO, there still is no space above the third pic on the Blog page ONLY on the phone and ONLY in ‘portrait’ orientation.
https://visualimpactsystems.com/P1270761.JPGThanks for your time and effort on this!
Mark Besh
Visual Impact SystemsMarch 13, 2021 at 1:16 am #1287897Victoria,
Any thoughts on the 2 ‘issues’ mentioned on March 9th?
Mark Besh
Visual Impact SystemsMarch 13, 2021 at 1:13 pm #1287948Hi mbesh,
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 .slide-entry { margin-top: 20px; } }
If you need further assistance please let us know.
Best regards,
VictoriaMarch 15, 2021 at 12:53 pm #1288262Victoria,
That did work for the third blog post picture down, BUT it also ‘pushed’ down the right side column pics on both the Home and Services pages. Can this be limited to just the Blog page?
ALSO, as a reminder…
So now, would it be possible on both the “Home” page and the “Services” pages that when this ‘grouping’ of 4 items is viewed on a phone—only in portrait orientation— could they be only one item ‘wide’ (a ‘column’ that has each item stacked on top of each other — as it works on our site using Angular: https://visualimpactsystems.com/ ).Thanks for your help.
Mark Besh
Visual Impact SystemsMarch 17, 2021 at 4:59 pm #1288757Victoria,
Any suggestions for the TWO items in the previous request? We are trying to finish the site so we can get final approval (so we can get paid).
Thanks,
Mark Besh
Visual Impact SystemsMarch 22, 2021 at 12:21 pm #1289608Hi Mark,
We are sorry for the late reply!
Please add following code to Quick CSS as well
@media only screen and (max-width: 480px) { .responsive #top.postid-25 #wrap_all .slide-entry { width: 100%; margin-left: 0; padding-bottom: 30px; }}
If you need further assistance on this thread, could you please point out them once again?
Best regards,
YigitMarch 24, 2021 at 2:01 pm #1290115Yigit,
Thanks, that worked.
We also wanted the same ‘look’ on the Home page with the same 4 pics, so we used your code and changed the page ID to 19. It doesn’t seem to be working (we cleared all the caches). Did we do something wrong?:
@media only screen and (max-width: 480px) {
.responsive #top.postid-19 #wrap_all .slide-entry {
width: 100%;
margin-left: 0;
padding-bottom: 30px;
}
}ALSO, there is still no space above the third pic down on the Blog page (on mobile and only in ‘portrait’ orientation).
So, here is both the Quick CSS And the Custom CSS file for you to look at.
Thanks for your help on this!
Mark Besh
Visual Impact Systems=========================
QUICK CSS:
#top #header .av-main-nav > li > a, #top #header .av-main-nav > li > a > .avia-menu-text {
background-color: transparent !important;
color: #333333 !important;
font-size:18px !important;
}.html_elegant-blog #top .avia-content-slider .blog-categories {
display: none;
}#top .container_wrap {
border: none;
}.main_color input[type=’submit’]:hover {
background-color: rgba(0,100,168,0.2);
}.slide-content .av-vertical-delimiter {
display: none;
}.current-menu-item > a > .avia-menu-fx {
opacity: 0;
}.slide-meta{
display:none!important;
}span.avia-menu-fx {
height: 5px;
}.postid-240 .iconbox_content {
background: #f9f9f9 !important;
border: 2px solid #dddddd;
}@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
display: block !important;
}}.postid-31 .avia_layout_row {
max-width: 1310px !important;
margin: 0 auto !important;
border: none !important;
}=========================
CUSTOM CSS:
/* Have fun adding your style here :) – PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( *//* General Custom CSS */
/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */@media only screen and (min-width: 768px) {
/* Add your Desktop Styles here */}
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */@media only screen and (max-width: 989px) {
/* Add your Mobile Styles here */}
@media only screen and (max-width: 989px) {
#top.home #av-layout-grid-1 .avia-builder-el-8,
#top.home #av-layout-grid-1 .avia-builder-el-11,
#top #av-layout-grid-1 .avia-builder-el-5,
#top #av-layout-grid-1 .avia-builder-el-8 {
display: none;
padding: 0 !important;
}
#top h3 a {
font-size: 18px;
text-transform: none;
}.responsive #top.postid-25 #wrap_all .flex_column {
margin-bottom: 0;
}
#top.postid-25 .content {
padding-bottom:0;
}
}@media only screen and (max-width: 989px) {
#top .no_margin.av_three_fifth.avia-builder-el-6 {
padding: 30px 50px 0 !important;
}
}@media only screen and (max-width: 989px) {
#top .no_margin.av_three_fifth.avia-builder-el-9 {
padding: 30px 50px 0 !important;
}
}@media only screen and (max-width: 480px) {
.responsive #top.postid-25 #wrap_all .slide-entry {
width: 100%;
margin-left: 0;
padding-bottom: 30px;
}
}@media only screen and (max-width: 480px) {
.responsive #top.postid-19 #wrap_all .slide-entry {
width: 100%;
margin-left: 0;
padding-bottom: 30px;
}
}=========================
March 24, 2021 at 4:56 pm #1290176Hi,
1- Please use the code as following
@media only screen and (max-width: 480px) { .responsive #top.postid-25 #wrap_all .slide-entry, .responsive #top.home #wrap_all .slide-entry { width: 100%; margin-left: 0; padding-bottom: 30px; }}
That would apply on both Service and home pages.
2- Please add following code to Quick CSS field in Enfold theme options > General Styling tab
@media only screen and (max-width: 480px) { .responsive #top #wrap_all .avia-content-slider-odd .slide-entry { margin-top: 30px; }}
Best regards,
YigitMarch 26, 2021 at 12:38 pm #1290543Yigit,
YEA!!! That worked!
Thank you and Victoria for ALL THE HELP on this! We REALLY appreciate it.
Issue is CLOSED.
Mark Besh
Visual Impact SystemsMarch 26, 2021 at 1:07 pm #1290547Hi,
You are welcome! :)
For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/
If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)
Enjoy the rest of your day!
Best regards,
Yigit -
AuthorPosts
- The topic ‘Enfold – 'Losing' Characters of Text in Blog Post’ is closed to new replies.