We help IT Professionals succeed at work.

Slant banner on mobile

185 Views
Last Modified: 2018-11-16
Hi,
I have responsive html.

I wanted slant banner. It works well on desktop (Desktop Screen shot) but doesn't work on mobile well See Image Screen Capture on MobileI wanted on mobile banner should be Required banner on mobile
The Html code to create banner is:
<div>
    <div class="d-flex">
        <div class="slant">START EXECUTING YOUR PROJECT</div>
        <div style="background-color:black;width: 40%" class="flex-grow-1">
            <a href="#" class="themesflat-button bg-white small">
                <span>
                    <span class="icon">
                        <i class="autora-icon-phone-contact"> </i>
                    </span> (+123) 4567 8901
                </span>
            </a>
        </div>
    </div>
</div>

Open in new window


CSS code used is:

.slant {
    background: red;
    line-height: 50px;
    text-align: center;
    width: 60%;
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .slant::after {
        position: absolute;
        content: " ";
        display: block;
        left: 50%;
        bottom: -20px;
        width: 100%;
        transform: rotate(140deg);
        background: black;
        top: 0;
    }

Open in new window


Please advise the solution.
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
It looks like the problem is the size of your font. You can add a media query that sets the font-size for screens larger than 768.

You can try doing something like this
1. add the class .slant-banner to your outer most div
<div class="d-flex slant-banner">

Open in new window

2. Add the following media query
.slant-banner {
	font-size: 12px;
}
@media (min-width: 768px) {
  .slant-banner {
    font-size: 16px;
  }
}

Open in new window


That will set your font to a smaller size - which should fix on mobile and then increase the font size on larger screens. You can play around with the actual values to get the effect you want.

Author

Commented:
AlsoMany Many thanks for your reply.

Text is going inside blank. Can we wrap text in case of mobile?
Also, the mobile no with white background is taking too big area then expected. See screenshot.
Also, desktop version is now also break.

Mobile Screen:
Mobile screen capture after update
Desktop Screen after update:
Desktop Screenshot
Actual Requirement:
Actual Requirenment
Mobile version is shown above.

Please advise.

Regards,
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Here is my implementation http://www.marcorpsa.com/ee/t3428.html - based on the code you have shown me.

Author

Commented:
Many thanks Julian

Looks like you have shared the URL for other request of mine. That was solved long time back.

Please see.

Regards,
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
No, that is an updated link - I have put the code you posted here into that link.

Author

Commented:
Many thanks Julian for your time.

I am not sure why you have not chosen link below
http://www.marcorpsa.com/ee/t3427.html

Are we addressing wrap text issue only or we are addressing all the issues we faced?

- After adding class="d-flex slant-banner" white area expanding like anything
- On the black area phone no area is very small. Here it expanded.
- Text is not wrapping or adjusting

From the link you provided. What I need to pick and put in my code.

If I am using class "featured-title-inner-wrap"  in div where text is written. Then it is breaking complete banner.

Please advise the change in banner.

Regards,
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
I took your code as posted from your opening post. If that is not correct please post the correct code.

Author

Commented:
I have updated code advised by you in my original comment.

Please find my revised code.

<div class="d-flex slant-banner">
    <div class="d-flex">
        <div class="slant">START EXECUTING YOUR PROJECT</div>
        <div style="background-color:black;width: 40%" class="flex-grow-1">
            <a href="#" class="themesflat-button bg-white small">
                <span>
                    <span class="icon">
                        <i class="autora-icon-phone-contact"> </i>
                    </span> (+123) 4567 8901
                </span>
            </a>
        </div>
    </div>
</div>

Open in new window


.slant {
    background: red;
    line-height: 50px;
    text-align: center;
    width: 60%;
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .slant::after {
        position: absolute;
        content: " ";
        display: block;
        left: 50%;
        bottom: -20px;
        width: 100%;
        transform: rotate(140deg);
        background: black;
        top: 0;
    }

.slant-banner {
    font-size: 12px;
}

@media (min-width: 768px) {
    .slant-banner {
        font-size: 16px;
    }
}

Open in new window


My banner is coming as detailed in
https://www.experts-exchange.com/questions/29126131/Slant-banner-on-mobile.html#a42734078

Please advise me what code change I need to do here.

Regards,
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Many Many thanks.
I applied the code. Your version on URL is great.
Mine has bit different.
When I applied the code My mobile output was:
Mobile Version After updating code
I adjusted the code as
.slant-left, .slant-right {
    padding: -1px 30px 15px 5px;
}

Open in new window


Made padding as -1px from 15px

Then my mobile version looks like
Mobile version after adjustment the padding
And the desktop version is:
Desktop version after adjustment the padding
Text is not wrapping. Also the is no space in the text from left.
Also, phone area white space height should be less as per mockup.

Actually, my this question is resolved. If you want I can open another question for this.

To be honest... This requirement was really tough which you have done very smoothly.

Many thanks to EE and you.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You should be able to take my code and use it exactly - if it is not working then something else on the page is interferring or it is a Browser issue.

What browser are you testing on?

Author

Commented:
Yes, It is possible.
Please guide me what should I modify to see the impact on browser.
I will change the settings and let you know.

My browser version is:
Chrome - Version 70.0.3538.102 (Official Build) (64-bit)

Thanks
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Tried on Chrome - seems to work fine.

Did you have a link to the site?

Author

Commented:
Many Thanks Julian

My full code is attached for slider slider.zip
We only modify file \css\dcsstyles.css
for any css overwrite etc.

I checked slider is not well on iphone 5 as well.
Please advise.

Regards,
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
I checked slider is not well on iphone 5 as well.
I don't have access to an iphone so I would need more information.

I am guessing it is because iphone5 does not support some of the flexbox code we are using.

Author

Commented:
I am just changing iphone from browser only. I am using Toggle devise toolbar from Chrome on developer tool by clicking F12.
Selecting Iphone5. I am not using actual device.

flexbox code is working. The banner looks like
https://filedb.experts-exchange.com/incoming/2018/11_w46/1402386/mobileViewAfterUpdatingScript.png

Regards
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
With F12
For the URL http://www.marcorpsa.com/ee/t3428b.html
I get this
ss173.jpg

Author

Commented:
Have you made any changes to the code? In the url you provided it is working fine.
Only in iPhone text is going inside black. Please see below the screenshot.
We can reduce text size in this case. Screen resolution for iPhone is 320*568.
IPhone View
Regards.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Only in iPhone text is going inside black
That is simply because the screen is too small.

You need to show me a design of what you want it to look like at 320px - then it is simply a case of setting the font size to match your requirement.

Author

Commented:
Please just make 2 pixel less and then I will adjust in media query by my own.

Please advise me the changes.

Many thanks for all your efforts and patience.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Make what 2 pixels less?

Your only options here are to
a) Cut down the number of letters you are using
b) bring the font size down
c) Wrap the text

Which one do you want to do?

Author

Commented:
I thing wrap is good.

Or anything which one is easy.

Regards
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
No, I need something to work against. I don't have time to come up with a design unfortunately. I can help you get to a particular design but you are going to have to give explicit details on what is required.

Author

Commented:
Ok.
I also need to check that,
You please let me know the changes you have done and what I need to do from my side.

I will check the actual details and come back to you. I will open new request for that.

For now please share me the changes I need to do and then I will close this change.

Many thanks
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
What changes? I haven't changed anything. The sample is as it was from my first post in this thread.

I can't tell you what to change until I know what the final look must be.

Author

Commented:
Ok No problem.

I am closing this request,
As my original post query is resolved.
I am closing this request,

I will check for the changes and will raise another request.

Many Many thanks for your support on this.

Author

Commented:
Many Many Thanks
You deserve really as Most Valuable.

Salute to you.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Thank you and you are welcome.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.