Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #210685

    Hello!

    I am using your Propulsion theme for my own new website, see development site. So far I am quite happy with the way it looks both on big screens and on mobile. However, there is one issue which I cannot overcome:

    I have created the template builder for the frontpage (home/welcome). I have used a callout text (Ontdek wat wij voor u kunnen betekenen!) with button (Bekijk alle informatie over onze diensten en producten »). On smaller screens (smaller than 768px I believe) the floating is not correct; the two items are shown on top of each other. I know it must have something to do with the @screen in CSS, but can’t figure it out (and of course it should be correct not only for me…)

    What can I do to solve this?

    Thanks & best regards,
    Monique

    #210843

    Hey MoniqueMartens!

    Please add following code to Quick CSS in Propulsion theme options under Styling tab

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .padding-active.content-area { font-size: 20px; }}
    @media only screen and (max-width: 767px) {
    #top .big_button { top: 100%; }
    .padding-active.content-area {
    padding-right: 0;
    font-size: 25px;
    text-align: center;
    }}

    Best regards,
    Yigit

    #211227

    Thanks Yigit for your quick reply!

    It helped, but now (on smaller screens) there is a conflict with the button and the primary background flag (‘Interessant om te weten’) which is just below the button. In my case the text is that long that on smaller devices it needs twice the height of the button (2nd line).

    Anyway, there seems not to be enough space between the two I think. As where everywhere there is quite some nice white space between the items, in this case it is so close together. I hope it makes sense to you what I mean.

    Can you have a look and let me know what to do?

    Best regards,
    Monique

    #212077

    Hi!

    Please add following code to Quick CSS as well and adjust as needed

    @media only screen and ( max-width: 480px) { 
    #top .callout { margin-bottom: 60px; }
    #top .big_button { height: 80px; }}

    That should do it

    Cheers!
    Yigit

    #212189

    Ok, thanks Yigit.

    One thing still bothers me: at screensizes 480-768px the botton is positioned on the right side in stead of the center…

    Any solution for that too?

    Regards,
    Monique

    #212245

    Hi!

    You can use this to move the button to the left:

    @media only screen and (max-width: 767px) {
    #top .big_button {
    right: 40px;
    }
    }

    Best regards,
    Ismael

    #212296

    Hi!

    Yes, I tried that already, but that again influences the position in smaller screens as well. That than becomes too far to the left.

    I don’t understand in the first place why it cannot just be centered, like

    #top .callout {
        clear: both;
        font-size: 26px;
        line-height: 1.4em;
        margin: 0;
        padding: 10px 0;
        text-align: center;
    }
    

    indicates?

    Thanks,
    Monique

    #212306

    Hi!

    Can you edit Ismael’s code a bit and use as following

    @media only screen and (max-width: 767px) and (min-width: 481px) {
    #top .big_button {
    right: 40px;
    }
    }

    Best regards,
    Yigit

    #212308

    Hi Yigit, that’s better.

    Although I still don’t understand why it is not simply centered already by the #top . callout code… :-(

    Anyway, I believe the issue is solved now.

    Thanks a lot,
    Monique

    #212314

    Hi!

    It does look centered on my end, please see screenshot here http://i.imgur.com/sXwDEoS.jpg
    Have you flushed browser cache after applying custom CSS codes? If not, please try and refresh your page a few times

    Best regards,
    Yigit

    #212319

    Hi!

    Yes, you put it right: it LOOKS centered. But in fact it isn’t really the case, technically seen.

    When next time I use the same code and make a new #top . callout (on another page) with a button with only one word it will not anymore be centered. I have changed my button text to ‘Click’ to show you what I mean.

    By using the code
    right: 40px;
    you force this particular button to go 40px to the left, so that it looks centered, but that is only the case with the long text I had used.

    Best regards,
    Monique

    #212449

    Hey!

    You can add Ismael’s code as following to apply it to only that certain button so other buttons will not be affected

    @media only screen and (max-width: 767px) and (min-width: 481px) {
    .home .dynamic_el_3.big_button {
    right: 40px;
    }
    }

    Best regards,
    Yigit

    #212870

    I’m sorry, but that doesn’t work… :-(

    And to be honest, I lost track a bit… :-(

    This is the full code I now have:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .padding-active.content-area {
        font-size: 20px;
    }
    }
    
    @media only screen and (max-width: 767px) {
    #top .big_button {
        top: 100%;
    }
    .padding-active.content-area {
        padding-right: 0;
        font-size: 25px;
        text-align: center;
    }
    #top .callout {
        margin-bottom: 40px;
    }
    }
    
    @media only screen and (max-width: 767px) and (min-width: 481px) {
    .home .dynamic_el_3.big_button {
    right: 40px;
    }
    }
    
    @media only screen and ( max-width: 480px) {
    #top .callout {
        margin-bottom: 60px;
    }
    #top .big_button {
        height: 50px;
        line-height: 25px;
    }
    }

    Best regards,
    Monique

    #213112

    Hey!

    If you do not mind, please create a temporary admin login and post it here privately so i can clean it up and fix what is broken now. Please point out callout boxes that needs to be edited

    Cheers!
    Yigit

    #213247
    This reply has been marked as private.
    #213356

    Hi!

    Changes are done. Please review your website. I have edited some css codes in Quick CSS

    Cheers!
    Yigit

    #213362

    Hi!

    It looks great :-D
    Thanks a lot for all your help Yigit!!

    Ciao!
    Monique

    #213365

    Hi!

    You are welcome Monique, glad we could help :) Let us know if you have any other questions or issues

    Cheers!
    Yigit

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Callout hero text with button not showing correctly on mobile’ is closed to new replies.