-
Posts
-
Hello there,
I finally got my website online and I hope now it will be easier to communicate, I also attached a mockup of the homepage (with the most issues) – you can find both in the private content part as well as 2 more screenshots of text braking issues I will elaborate on in a bit and links to the other 2 pages of my website.So, here are my issues:
HOMPAGE:
1. Hero section – In small screens (1336×768 and under, tablet and some mobiles) the text seem to brake and go over the transparent part of my hero section (see no. 3 in private content) is this fixable somehow?
2. Hero section – in mobile the left side of the image is invisible, is there any way to fix this?
3. “conscious, passion-driven” section – There is an upper “padding” even though there is no padding value anywhere. Can this be fixed?
4. “conscious, passion-driven” section – In small screens (1600×900 and under, tablet and some mobiles) the text seem to brake and go over the transparent part of my hero section (see no. 4 in private content) is this fixable somehow?
5. “conscious, passion-driven” section – I can seem to align the copy to the end of the block (aligned with the “stop” image in the block above) please see No. 2 (homepage mockup) in private content for comparison
6. “Ready to evolve” section – how can i enlarge the font size in the button? please see No. 2 (homepage mockup) in private content for comparisonContact-me page
1. How can I change the submitting button color to the same orange that you can see on hover? You can view this page in the link on No. 5 in private contentAbout page
1. Is there any way to make the running numbers on the bottom more centered and closer together as appose to stretched on the whole page as they are now? You can view this page in the link on No. 6 in private contentI hope everything is clear and detailed enough.
Looking forward to your reply.D
Hey Dee007,
Sorry for the late reply, could we try sticking to one issue at time please? Threads like these then to be very messy and hard to follow if not.
1. That is happening on my 13″ laptop as well, could you to use a smaller font size maybe?
2. I think you mean the right side of the image? The animated character? When using background images they cannot display the same on desktop as on mobile because of the large difference in screen size. You could try creating a new section to show only for mobile though and show/hide the correct one with CSS like this:
@media only screen and (min-width: 768px) { #section-desktop { display:block !important; } #section-phone { display:none !important; } } @media only screen and (max-width: 767px) { #section-desktop { display:none !important; } #section-phone { display:block !important; } }3. I’m not sure I understand what you mean by that, please post a screenshot highlighting what you would like to change.
4. Not sure I understand what you are looking to achieve there either, the image and the text looks to be added inside of a 4/5 element so the text will wrap under the image if it can’t fit on the right of it. Try using different layout elements if you want the text to stay withing a column.
5. I don’t understand what you mean, please try to explain a bit further.
6. Please try the following in Quick CSS under Enfold->General Styling:
.home .avia-button-center .avia_iconbox_title { font-size: 30px; }1. Please try the following in Quick CSS under Enfold->General Styling:
.page-id-1555 input[type='submit'] { background-color: #525454 !important; }1. Please try the following in Quick CSS under Enfold->General Styling:
.page-id-1206 #av_section_10 .container { max-width: 70% !important; }Best regards,
RikardHi Rikard,
a bit confused here… you ask to “stick to one issue” but address them all… so not sure what you want me to do here…HOMPAGE:
1. Hero section text braking – yes smaller font size is the obvious solution but it will have to be so small it will look bad. No other ideas?
2. Hero section right side of the image is invisible – do the “#section-phone” and “#section-desktop” go under the Section ID part of each block?
3. “conscious, passion-driven” section unclear space – please look at link No. 1
4. “conscious, passion-driven” section text brake – it is actually in a 2/3 element… I changed it to 4/5 and it still happens in some screen sizes…
I do not want the text to break like that. Is that possible?
5. “conscious, passion-driven” section alignment issue – the idea here is to have the “stop” block to the right of the center line of the screen and the next block on the right side of the center line and no matter what element I use, this doesn’t seem to happen… please look at link No. 2 for a detailed sketch of how it is, how I want it etc.
6. Great, that worked.
7 ***NEW*** – I forgot to mention the alignment of the bullet list – can you help with that? see link No. 3
Contact-me page
1. Change the submitting button color – this code did not work. it stayed the same color + it stopped the hover effect. Any other suggestionsAbout page
1.running numbers on the bottom more centered and closer together – this code is great but I dont think they are centered – view link No. 3Thank you.
Hi,
What Rikard meant was it gets really complicated when there are 7 questions in one thread. It is easier for us and for other users to follow when there are 7 different threads with 1 question in each :)
1- Please refer to this post – http://kriesi.at/documentation/enfold/color-section-with-100-container/ and adjust the size of your container inside your color section. You are currently using column elements to center your text.
2- Yes. We have a post in documentation as well that you can refer to – http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/ and display/hide certain elements on mobile. So you can replace your element with the one that is optimized for mobile.
3- Please add following code to Quick CSS.home #av_section_4 h3 { margin-top: 0; }4- That would not be the case if you used only two column elements one on the right and other on the left and adjust container size as needed by referring to my answer to #1
5- You can also try using Grid Row element with two rows and two cells.
6- Great! Glad Rikard could help :)
7- Again, please see #4 and #1 :)Contact me
1- Please use following code.avia_ajax_form input.button { background: #ff9900; border: none; }About me
1- My reply to #7, #4, #1 would help in this case as well :)Best regards,
YigitHello Yigit,
I feel that perhaps it is worth mentioning I am not a big expert on any of this. I knew html a long long time ago and have never worked with your theme. So if you can take that into account and be a little more detailed and specific it will go a long way in helping me. thanks.1. To start with – are you recommending not to use column elements to center text (I do it on other blocks as well)?
secondly – right now you can see it in the live V directly in a color section. It looks ok but in 1024×768 the right side of the copy gets cut.
should I pot the copy in an element or directly in a “color section” ? .
or maybe use padding and not margin? (I am not all that clear on which fits here)
again – the idea here is to center the text and avoid it breaking as much as possible.
here is the code I have right now#homepagehero .container {
width: 100% !important; max-width: 100%;
padding:0; margin-left: 25%; margin-right: 25%;
}
2. Got it, thanks.
3. after adding the code the space did get smaller but there is still some space (you can see it in the live website) why is that the other blocks did not behave this way?
4. Not sure I follow, Could you please be more specific?
5. Wouldn’t mind giving it a go but how do I add a row to the grid?
6. –
7. this was even more complicated to work out then No. 1. you can see it in the live V
here is the code I have there now:
#accomplish .container {
width: 100% !important; max-width: 100%;
padding-top: 0px; padding-right: 0; padding-bottom: 0px; padding-left: 0; margin-left: 25%; margin-right: 25%;
}Contact me
1. perfect!About me
1. I got it sorted another waythanks again
DHi,
Is this is testing environment? If it is or if it does not have visitors yet, do you mind creating a temporary admin login and post it here privately so we can apply the changes?
Best regards,
YigitHi,
Sorry for the late reply! We were working on theme updates.
We have released Enfold 3.8.3 and we have added an option for grid cells to set height to 100%, 75%. 50% and 25% instead of the previous px based values only. Now you can make the layout you would like to replicate easier.
Please update Enfold to the latest version 3.8.3 – kriesi.at/documentation/enfold/updating-your-theme-files/ then we can continue :)Best regards,
YigitHello?
There are only 2 days left in the temp admin account I opened for you (it was for a week)…
Please get back to me ASAPthank you
DGuys, what is going on?
it has been over a week since I heard from you.
Are you ever going to get back to me?
Please let me know what is going onP.S
since the last temp admin time frame was over, I opened a new one to prevent any further delays
See Private content for linkHi,
I have created a private testing page linked in private content field.
I used custom CSS to decrease container width on content however you can simply remove unique ID’s from your color sections and go to Enfold theme options > General Layout > Dimensions and decrease container width to 900px and then add following code to Quick CSS to display header container fullwidth#header .container { max-width: 100%!important; width: 100%!important; }Best regards,
YigitHello there,
Not sure what happened to my reply (posted on the same day you posted yours) but here it is again –
I updated container to 900px. It did resolve some issues (after removing all the “column elements” etc)
However, 2 issues are still not fixed –
1. The text on the 4th block is still breaking (No 4 on my original list) Using the grid might solve it but I don’t see any background color property for the grid + it will not be aligned with the block above it + I am not sure if it’s a wise application of it? – you can see both grid and non-grid on the live V of the site right now
2. The bullet list on the 5th block is now aligned with the title but now the text is going further than the title on the left side (see link to screenshot in Privat content)and a new issue following the change
1. Both hero sections of the contact (link No 2 in the private content) and the about pages (link No 3 in the private content) are now not behaving as they did – which is the copy stay put while the image re-adjust itself to fit the screen size. Is there any way to fix this or will I have to use a fixed background?
2. The running numbers at the bottom of the about page (link No. 3) do not fit in one line anymore…Thanks for all your help
D
Hi,
1- I edited your page and placed two 1/2 column elements into your color section element and placed your content inside it. Now it does not break on mobile
2- I edited functions.php file and enabled custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and edited your icon list element, gave it a custom CSS class and added following code to Quick CSS field.avia-icon-list-container.custom-il { max-width: 750px; }1a- I edited your contact page as well and fixed it by adjusting column count and size. About page cannot be found. Can you please check the link once again?
Best regards,
YigitHi D!
Can you please create temporary admin logins once again? Previous one seems to be expired
Regards,
YigitHi
thank you.
now we just have the running number issue – The running numbers at the bottom of the about page do not fit in one line anymore…Hi,
Your last column has custom classes of the first column for some reason that is why it is not inline with other column elements. Can you please create a temporary admin login once again? :)
Best regards,
YigitThat is indeed strange… I can’t find any CSS related to that block and to me it looks like it is trying to fit into 900px which is too small for it or something…
Anyway, I opened another temp account for you (link below)
And just to make sure we are on the same page – I want the numbers to be stretched to full screen if possible.thanks
Hi,
I took your column elements out of the color section element and updated your page and that helped. Can you please review your website again?
Best regards,
YigitHi,
they are in one line now but are still under the 900 px… can’t they be stretched for the full screen like it was before we limited the website to 900px?Hi,
I added following code to bottom of Quick CSS field
.page-id-1206 #after_section_16 .container { max-width: 100% !important; width: 100% !important; }Please review your website :)
Best regards,
YigitHey!
You are welcome! :)
For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)Regards,
Yigit
- The topic ‘A few issues’ is closed to new replies.