Responsive bugs ?

responsive fix

- 6 years, 2 months ago Elise
  Participant
  
  Hello,
  
  I had to recreate form scratch a Team box in a similar style than the one you offer because there is a bug on responsive versions : text is going out of the box.
  So, it is a bug or can I fix it ?
  
  Also, I would like to set different sizes for different resolutions for my background header images in pages “shop” and “kite school”. And I don’t find how to fix it. Can you help me please ?
  I tried a lot of other solutions before putting my image in a background + transparent 1px image on it, but fullscreen solutions didn’t work. So, I didn’t have choice.
  But I’d like to fix it on responsive alternatives.
  
  And, last problem : On responsive version, the blog box on home page and on bottom of my “Histoire” page has bug as the text and button are out of the box. How can I fix the image height to create a better design here ?
  
  Thanks a lot for your help!
  
  Best regards,
  Elise
- 6 years, 2 months ago Elise
  Participant
  
  And, also, I just noticed that the header is not visible on a few pages : “Mentions légales” et “Cookies et confidentialité”. How can I fix this ?
  
  Tanks a lot !
  Best regards,
  Elise
- 6 years, 2 months ago Ruco
  Keymaster
  Hello,
  
  1. The problem about the team is because you haven’t made them in the right way. You have to put the image and the text in the same columns only in that way you will see the right responsive configuration
  
  2. For the blog responsive issue you have to change these lines into the style.css file :
  
  @media (max-width: 767px) .blog-entries .fullimage_transparent-style h2 { font-size: 10px !important; line-height: 18px !important; } .blog-entries .fullimage_transparent-style h2{ padding-bottom:8px; }
  
  3. I have also fixed the issue on responsive with the top banner.
  
  Regards!
- 6 years, 2 months ago Elise
  Participant
  
  Hello and thanks for your answer !
  
  1. Yes, I tried it in the right way, by using the Team module but this module doesn’t work in responsive. So I re-create from scratch a fake team module by myself but with paddings, it doesn’t work to put them in the same line and columns.
  Here is a link to show you how it works with the official team module : https://4morefeeling.fr/team-test/
  And here is an image to show you in aprox. 930px what’s going on : https://moon-light-lotus.com/img/930.png
  
  2. Ok. Can I add these styles in this section ? https://4morefeeling.fr/wp-admin/theme-editor.php
  
  3. You are talking about which problems ? Because burger menu on iphone SE is not visible yet. Neither the home slider is fixed. Neither the header is visible in responsive versions for “Cookies & confidentialité” and “Mentions légales” pages…
  
  Thanks a lot !
  Best regards,
  Elise
- 6 years, 2 months ago Ruco
  Keymaster
  
  Hello,
  
  1. I have already done it for you https://4morefeeling.fr/histoire/
  
  2. Yes
  
  3. I have fixed the Menu issue
  
  Let us know.
  
  Regards!
- 6 years, 2 months ago Elise
  Participant
  
  Hello,
  
  1. Ok, thanks a lot !
  2. ok. I’ll do this. Thanks.
  3. Ok, but I can’t see the header in the pages “Mentions légales” and “Cookies & confidentialité”.
  Regarding the home slider, what can I do to keep the animation on responsive versions ?
  
  Thanks for your help,
  Best regards,
  Elise
- 6 years, 2 months ago Elise
  Participant
  
  Well, sorry but I checked on the page https://4morefeeling.fr/team-test/ where I put the “official” team module and it seems not working yet in responsive versions.. The text still goes out of the boxes when in ipad version.
  Do you think you can fix it?
  Or I keep what I created on https://4morefeeling.fr/histoire/ page ?
  
  Regards,
  Elise
- 6 years, 2 months ago Elise
  Participant
  Ooooh ! OK, I understand !!
  You have changed the tables to have the pic above the text ! Ok, I get it, sorry ;-)
  
  So that’s ok, thanks !! :)
  I come back to you tomorrow to fix the blog style because it seems not working and there is now a bug on desktop display..
  
  Best regards,
  Elise
  
  This reply was modified 6 years, 2 months ago by Elise.
- 6 years, 2 months ago Elise
  Participant
  Hello,
  
  So, I re-checked all the points and :
  
  1. For History page : that’s good, thanks !
  
  2. For css adding regarding blog appearance, there’s a problem. I copy/pasted the code and there seems to have an error
  AND, now, in addition to the fact that it does not work yet on responsive version (iphone SE)
  
  There is now a bug on desktop display (you can see the golden line IN the title)
  
  3. Regarding headers : Here are printscreens on iphone SE that shows there is not headers on the pages https://4morefeeling.fr/cookies-confidentialite/ and https://4morefeeling.fr/mentions-legales/ page on responsive versions.
  
  (despite the fact that I have to fix the title sizes).
  
  AND, by the way, I asked you to fix the header background images for responsive versions for the pages https://4morefeeling.fr/kite-school/ and https://4morefeeling.fr/shop/.
  You fixed it (and thanks a lot!) for the kite-school page but, for the shop page, the header image was not visible after your intervention (I noticed this bug in the template : sometimes when you make some fix or changes on some parameters, the bg image dispapears). So I re-put it by delete bg image and re-put. And now, if f*cks again.. :)
  
  Here is a screenshot on iphone SE :
  
  This (kite school) is ok on iphone :
  
  But this one (shop) is not :
  
  And, last point, I’d like to keep the slider animation on responsive version and I want to know how to fix it. At the moment, images are one below the other.
  
  Thanks a lot for your help !
  There are the last points to finish my website.
  
  Best regards,
  Elise
  
  This reply was modified 6 years, 2 months ago by Elise.
- 6 years, 2 months ago Ruco
  Keymaster
  
  Hello,
  
  2. I have fixed you issue with the css you have missed an “{”
  
  You have to edit the style.css file and modify this line:
  
  .blog-entries .fullimage_transparent-style h2:after{ bottom:4px !important; }
  
  3. You can fix this by adding this lines :
  
  @media(max-width:767px){
  .cl-row .bg-layer{ background-size:contain !important;}
  }
  
  Save the changes and let us know.
  
  Regards!
- 6 years, 1 month ago Elise
  Participant
  Hello,
  
  Ok, so, sorry for my last long message but you didn’t fix everything AND you don’t answer to all my questions.
  
  2. Regarding blog entries for desktop site : since you changed the css code there is a bug : the gold line is displaying IN the second row of title. So, can you fix this please ?
  I just made the changes you suggest and it doesn’t change anything, neither in responsive, neither in desktop versions.
  And, regarding the error I’ve made : I just copy-pasted what you sent me ;)
  
  3. Regarding the size of bg images in the shop page, I just copy-pasted the code you gave me but it doesnt change anything.
  
  And, you didn’t answer to my request regarding the slider on home page : how can I fix it to keep the animation on iphones ? It doesn’t work.
  
  AND, you didn’t fix the problem regarding the headers for page “Confidentialité” and “Mentions légales” on responsive version.
  
  Please let me know what to do..
  Best regards,
  Elise
  
  This reply was modified 6 years, 1 month ago by Elise.
- 6 years, 1 month ago Mirela
  Participant
  
  Hello,
  
  2-I checked the separator (golden line) in desktop, ipad and mobile but looks good on my side. See screenshots: https://postimg.cc/gallery/38d2w0qoo/
  Did you fix it?
  We did send you the code, but based on where you paste, it some bracket in the existing code could be misplaced and cause an issue. Nothing extraordinary, these are small speedy mistakes everyone can make (even experienced programmer’s).
  
  3-I checked the header background image in both chrome simulated mobile layout and actual mobile device, this is what i see: https://postimg.cc/hJV3WWWz
  The background is resizing well. Are you not getting this?
  
  Please clear cache and hard refresh. let us know if the situation persists.
  PS: You can write as long message as you need. No need to apologize for that.
  
  Best regards!
- 6 years, 1 month ago Elise
  Participant
  
  Hello,
  
  2- No, I didn’t change anything since my last message.
  Well, actually, it seems ok on Chrome and Safari but not on Firefox, the one I usually use ;)
  Here is a printscreen : https://moon-light-lotus.com/img/Firefox.png
  
  On iphone, it’s ok in landscape version but not in portrait. I would like to avoid the “read more” button to be on the footer.
  Here are printscreens.
  https://moon-light-lotus.com/img/iphoneSE.PNG
  And
  https://moon-light-lotus.com/img/iphoneSE_paysage.PNG
  
  Regarding the code, actually I’m mostly a web designer and have some basic knowledges in programmation so it’s possible that I copy/paste the code at a wrong place ;) But, normally I check if there is { or < opened and closed at the end.
  Regarding css I’m not really comfortable, indeed.
  
  3- Ok, it’s done now. Thanks ! I made a hard refresh.
  
  4- regarding the home slider, I think you didn’t answer to me on how I can fix it for responsive version ? It seems it does not work as an animation. I can only see fixed images one below the other. What can I do to fix it ?
  here is a printscreen on my iphone (safari) : https://moon-light-lotus.com/img/slider.PNG
  
  And : 5- by the way, I didn’t see that there are some bullet lists for links in the footer (facebook, IG, …, and on second nav) on Chrome and Safari (desktop versions). Is it possible to fix it ?
  
  Thanks a lot for your help !
  ps : and.. thanks for this note ;P
- 6 years, 1 month ago Mirela
  Participant
  Hello,
  
  2-Ok, this is strange now. i chaecked the site in firefox too, this is what i get: Normal desktop: https://postimg.cc/kVvgQFHY
  Resized window: https://postimg.cc/jwyQQ9T0
  
  For the mobile view, add this code into your Custom Css box:
  
  @media (max-width: 480px){ article .post-thumbnail > img { min-height: 230px !important; }}
  
  Result screenshot: https://postimg.cc/5YM1RHhY
  Change the value to your wish.
  
  4-In the Codeless Slider settings i changed the direction of the slider from vertical to horizontal. See screenshot of option: https://postimg.cc/WhfQFF1R
  
  5-Yes, there is some generated css setting the social simple style that has a list type. This is not present in our theme so i suspect something else in the site is generating it. however, i fixed it by adding this code into your General > Custom Codes > Custom Css:
  
  ul.social-icons-widget.simple { list-style-type: none !important; display: inline-flex; } ul.social-icons-widget.simple li { padding-right: 15px; }
  
  And this css for the footer menu:
  
  ul.menu { list-style-type: none !important; }
  
  Best regards!
- 6 years, 1 month ago Elise
  Participant
  
  Hello,
  
  2- Well, I just made the firefox update and I have the same design as you now. So that’s ok for desktop.
  Regarding mobile version, I’ve put the code you sent in Apparence > Editeur > feuille de style. Is it the right place ? Because I change the value to 250 then 300px and it doesn’t change anything.
  Screenshot here : https://moon-light-lotus.com/img/IMG_7561.PNG
  
  But now I have an other problem on blog pages : header image, title, etc. are completely broken… Normaly I’ve put big header (one row) and centered text.
  So why did it changed? What can I do to avoid re-make all pages ?
  Screenshot here : https://moon-light-lotus.com/img/04_10_001.png
  
  4 – Ok, great, it works now ! thanks !
  
  5- Oh yess ! Great! thanks! It’s ok now!
  
  6- sorry to add one point again… but I just saw that headers on these pages aren’t fixed yet on mobile version :
  https://4morefeeling.fr/cookies-confidentialite/
  https://4morefeeling.fr/mentions-legales/
  
  Screenshot here : https://moon-light-lotus.com/img/IMG_7560.PNG
  
  Well, thanks a lot again for your help,
  Best regards,
  Elise
- 6 years, 1 month ago Mirela
  Participant
  Hello,
  
  2-Try clearing cache and hard refresh. Some times the server takes time to show all changes.
  -I can’t tell for sure what triggered the change in header. You can either edit each page one at a time, or add this css:
  
  article.post h1.entry-title { text-align: center; }
  
  To align it all in one go.
  
  6-This is what i see: https://postimg.cc/bDKfgP6N
  Try clearing cache and hard refresh.
  
  Let us know.
  Best regards!
- 6 years, 1 month ago Elise
  Participant
  Hello,
  
  Sorry for being late to answer but I couldn’t check before now.
  So, I don’t understand what’s going on this theme but now
  
  – the background header in page CONTACT and HISTOIRE are broken. It doesn’t work anymore. Please can you fix it ? I tried to re-put it several times, clear cache, hard refresh : nothing. It seems empty but it’s not. There are image put in bg but they aren’t displayed.
  
  -2- regarding size of blog post on mobile, it does not work.
  I cleared cache and made hard refresh.
  
  regarding blog headers, there is a BIG problem now : I tried to fix the problem but
  -> in modern style : all header sucks ! All style texts are broken and header image has no height. Normally it’s one row.
  -> in classic style all text are ok but no bg image.
  Please, can you fix it ???? I’m not sure the code you ask me to copy-paste will work. It won’t fix the background image problem. I think it’s a general problem for modern and classic style. It worked perfectly before you change something.
  Can you please check .css file ??
  
  – 6- yep, so there ISN’T header… :) I would like to have a header with a burger menu and a logo. That’s all I want :) I already cleared cache and made hard refresh.
  
  Thanks a lot for your help,
  Best regards,
  Elise
  
  This reply was modified 6 years, 1 month ago by Elise.
- 6 years, 1 month ago Elise
  Participant
  
  Hello,
  
  Is it possible to expect a really quick answer from you ?
  The website is completely broken since 10 days now…
  I’m really sorry to insist, but it wasn’t like this before your intervention…
  All the headers were working perfectly..
  So, can you please help me really soon ?
  
  Thanks a lot for your help
  Best regards,
  Elise
- 6 years, 1 month ago Elise
  Participant
  
  Hello again,
  
  I just checked the HISTOIRE and CONTACT pages, it seems ok now. For sure, it was that cache problem.
  
  But the Blog is always broken in both styles : modern and classic.
  And for this, I just cannot do anything.
  Can you please help me really soon ?
  I need this website to prospect for business.
  
  Thanks a lot for your help.
  Best regards,
  Elise
- 6 years, 1 month ago Mirela
  Participant
  
  This reply has been marked as private.
- 6 years, 1 month ago Elise
  Participant
  Hello,
  Thanks for your answer.
  
  Ok for the Contact and Histoire header, thanks a lot !!
  Sorry for my several messages, but I tried to check and re-check what you’ve done and hard refresh and so on. And I only saw the Contact/history point after.
  
  Regarding the blog problem, it seems there is a major bug that wasn’t there before with the headers.
  Before, I could choose modern style, then have a fullscreen image and texts over it. Now, it’s broken.
  Or, I could choose classic style and it’s broken too.
  Both styles are not working anymore. And it was ok before. It’s why I’m saying it was ok before you change.
  
  Regarding css style, I only copy-pasted what you sent me.
  I’m not a developper so I can’t do more than this. I’m a web designer.
  
  Regarding what needs to be fixed, here is a resume :
  – blog header style
  – headers for https://4morefeeling.fr/cookies-confidentialite/ and https://4morefeeling.fr/mentions-legales/ for mobile. There isn’t any header now. I’d like to have logo and burger menu as the other pages
  – regarding the blog post display for home page in mobile style, I quit!! the css code you gave doesn’t work. So I let it like this, even the blog post is on the footer.
  I just can’t be 1 month on this web site… :/
  
  As I said just before, I’m not a developper. So I just couldn’t send your more code…
  Ok, I understand you can send me more code and I know, of course, that you created this theme. But I’m wondering why the blog was working before and not now anymore..
  That’s all what I’m saying :)
  I didnt’ change anything, except the code you sent me that I copy/pasted.
  
  Thanks a lot for your help,
  Best regards,
  Elise
  
  ps : can you please notify me when you answer ? I didn’t get notification for you last answer. Thanks a lot.
  
  This reply was modified 6 years, 1 month ago by Elise.
- 6 years, 1 month ago Mirela
  Participant
  
  Hello,
  
  I am looking into this now. Will update you soon.
  
  PS:Check the “Notify me of follow-up replies via email” to get the notification of new replies.
  
  Best regards!
- 6 years, 1 month ago Elise
  Participant
  
  Hello,
  
  Ok, thanks a lot!
  I’m looking forward to have good news from you very soon :)
  
  Best regards,
  Elise
- 6 years, 1 month ago Mirela
  Participant
  
  Hello,
  
  I tried covering all points. The added css is in Custom Css box. This is the result from my side now:
  https://jmp.sh/UOQhd9N
  
  There are two screen recordings. Please check and let me know.
  
  Best regards!
- 6 years, 1 month ago Elise
  Participant
  
  Hello,
  
  Thanks a lot !
  I see that https://4morefeeling.fr/cookies-confidentialite/ and https://4morefeeling.fr/mentions-legales/ pages have now a header so that’s a good point ! Thanks.
  
  Regarding the blog posts displaying on home page, it seems ok for display. But I see images are a bit stretched on height. Do you think you can do something for this?
  Here is a screenshot : https://moon-light-lotus.com/img/IMG_7644.PNG
  
  Regarding the blog articles, the problem is still there. I don’t know if you have understood that for that point I was talking about desktop version? I’m sure I told it somewhere but well, sorry if it wasn’t clear.
  
  Here is a screenshot for an example in classic style :
  https://moon-light-lotus.com/img/001.png
  -> there is no header image that is displaying
  
  Here is a screenshot for an example in modern style :
  https://moon-light-lotus.com/img/002.png
  -> the first row is broken : text is displaying with no css and we can’t see the image in one row as it was before.
  
  On mobile, the header seems ok for modern style but not for classic style.
  For classic style, there isn’t any header image either. And any image either in “related post” for this style.
  
  Here is the link for the post with classic style for testing :
  https://4morefeeling.fr/4-more-feeling-se-balade-en-republique-dominicaine/
  
  And here is an example of link for modern style :
  https://4morefeeling.fr/gwadastyle-by-steuph-with-fun/
  
  I would like to apply modern style everywhere if it’s possible but I tested the other option on one post.
  
  Please let me know.
  Best regards,
  Elise
- 6 years, 1 month ago Elise
  Participant
  
  Hello,
  
  Any news, please ??
  Are you on holiday? :)
  
  Thanks,
  Elise
- 6 years, 1 month ago Ruco
  Keymaster
  Hello,
  
  1. About the stretched image change these lines of code in style.css:
  
  @media (max-width: 767px) @media (max-width: 480px) article .post-thumbnail > img { min-height: 203px !important; }
  
  2.I dont really now why you have experience this issue. I have test on my localhost server and i cant replicate this issue.
  
  Please can you update the theme with the latest version maybe this can fix this issue.
  
  Let us know.
  
  Regards!
- 6 years, 1 month ago Elise
  Participant
  
  Hello,
  
  1. About stretched images, what do you mean by “change these lines of code”? Have I to add them or change them? And change what? Is this mean that these lines are already in style.css and I have to change them? But change what? the “min-height”?
  
  2. Regarding the blog bugs, well… are you kidding me??? Really, it was working before, when I created the pages so what’s exactly going wrong with this?
  You cant replicate this issue?? The blog IS broken in all headers’style..
  Can you check the style.css code or something else ?
  I can sure try to install updates but can you explain to me how to do it? I’m a web designer, not a developper and I don’t have any budget to ask someone else to do it.. I’m already trying for 1 more than one month to fix this website… :/
  
  Please let me know.
  Best regards,
  Elise
- 6 years, 1 month ago Elise
  Participant
  
  Hello again,
  
  Please, when you create a fake news to test something, can you delete it after? You know, my client needs her website for real, to sell some products.
  Are you really serious?
  I’m waiting now for more than one month to fix all these problems…. And you have NO solution for the blog problems… You let me several days without any answer..
  What can I do now?
  Please, we are friday now. Can you answer TODAY to my last post so that I can try to install update and fix this as quickly as possible ???
  
  Thanks
- 6 years, 1 month ago Ruco
  Keymaster
  
  Hello,
  
  1.Fixed it.
  
  2.Header style fixed.
  
  Sorry for the delay.
  
  Regards!
- 6 years, 1 month ago Elise
  Participant
  
  Hello,
  
  Thanks Ruco for fixing all this quickly!
  It’s really apreciated!
  
  All seems ok right now.
  
  Thanks,
  
  Best regards,
  Elise
- 6 years ago Ruco
  Keymaster
  
  Hello,
  
  You are welcome !
  
  Regards!