Slant banner on mobile

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.
Dinesh BaliAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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.
Dinesh BaliAuthor 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,
Julian HansenCommented:
Here is my implementation http://www.marcorpsa.com/ee/t3428.html - based on the code you have shown me.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics ā€“ known as key performance indicators (KPIs) ā€“ for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Dinesh BaliAuthor 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,
Julian HansenCommented:
No, that is an updated link - I have put the code you posted here into that link.
Dinesh BaliAuthor 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,
Julian HansenCommented:
I took your code as posted from your opening post. If that is not correct please post the correct code.
Dinesh BaliAuthor 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,
Julian HansenCommented:
Updated version here
CSS
.slant-banner {
    font-size: 12px;
	text-align: left;
}

.slant-left {
    background: red;
    width: 60%;
    color: #fff;
    position: relative;
    overflow: hidden;
	box-sizing: border-box;
}
.slant-right {
	background-color:black;
	width: 40%;
}
.slant-left, .slant-right {
	padding: 15px 30px 15px 5px;
}
.slant-left::after {
	position: absolute;
	content: " ";
	display: block;
	left: 50%;
	bottom: -20px;
	width: 100%;
	transform: rotate(140deg);
	background: black;
	top: 0;
}

@media (min-width: 768px) {
    .slant-banner {
        font-size: 16px;
		text-align: center;
    }
	.slant-left, .slant-right {
		line-height: 50px;
		padding: inherit;
	}
}

Open in new window

HTML
<div class="d-flex slant-banner">
    <div class="d-flex" style="width: 100%;">
        <div class="slant-left">START EXECUTING YOUR PROJECT</div>
        <div class="slant-right 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dinesh BaliAuthor 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.
Julian HansenCommented:
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?
Dinesh BaliAuthor 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
Julian HansenCommented:
Tried on Chrome - seems to work fine.

Did you have a link to the site?
Dinesh BaliAuthor 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,
Julian HansenCommented:
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.
Dinesh BaliAuthor 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
Julian HansenCommented:
With F12
For the URL http://www.marcorpsa.com/ee/t3428b.html
I get this
ss173.jpg
Dinesh BaliAuthor 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.
Julian HansenCommented:
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.
Dinesh BaliAuthor 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.
Julian HansenCommented:
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?
Dinesh BaliAuthor Commented:
I thing wrap is good.

Or anything which one is easy.

Regards
Julian HansenCommented:
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.
Dinesh BaliAuthor 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
Julian HansenCommented:
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.
Dinesh BaliAuthor 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.
Dinesh BaliAuthor Commented:
Many Many Thanks
You deserve really as Most Valuable.

Salute to you.
Julian HansenCommented:
Thank you and you are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.