Need to change single block font size on mobile

  • Hello. I need to change the size of a text overlay on the title picture. If I try to put a longer sentence, it looks ok on the desktop, but on mobile it shows only a few words with the rest of the text left out.

    What css do I need to add for that single line?

    • This topic was modified 3 years, 2 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Please add the following CSS in that block’s CSS.

    
@media screen and (max-width: 767px) {
.wp-block-getwid-media-text-slider-slide-content{max-width:100%;}
.wp-block-getwid-media-text-slider .wp-block-getwid-media-text-slider-slide__content{padding:25px!important;}
h2{font-size:24!important}
p{font-size:16!important}
}
    • This reply was modified 3 years, 2 months ago by Umesh Gupta.
    • This reply was modified 3 years, 2 months ago by Umesh Gupta.
    Thread Starter alexalbti

    (@alexalbti)

    Hello @umesh84, thanks for contributing to my issue. Can you tell me exactly where I need to add it? Appearance-Customize-Additional CSS?

    • This reply was modified 3 years, 2 months ago by alexalbti.
    Thread Starter alexalbti

    (@alexalbti)

    @umesh84, I have the following code in my theme:

    @media (max-width: 990px) {
	.site-main {
    overflow-x: hidden;
	}
	body.page .site-main > .hentry > .entry-content > .fullwidth, body.page .site-main > .hentry > .entry-content > .fullwidth > *, body.page .site-main > .hentry > .entry-content > .fullwidth > * > *, body.page .site-main > .hentry > .entry-content > .fullwidth > * > * > *, body.page .site-main > .hentry > .entry-content > .fullwidth > * > * > * > * {
	height: 250px;
}
	.wp-block-getwid-media-text-slider-slide-content__content-wrapper>*:first-child {
		font-size: 30px !important;
	}
	.wp-block-getwid-media-text-slider-slide-content__content-wrapper>*:last-child {
		font-size: 20px !important;
	}
	
	.home .mb0 .wp-block-column:not(:last-child) {
		padding-bottom: 2rem;
    border-bottom: 8px dotted #d9e1e8;
	}
    Thread Starter alexalbti

    (@alexalbti)

    as well as the following above it

    @media (min-width: 991px) {
body.page .site-main > .hentry > .entry-content > .fw-light {
	  max-width: calc(100% + 95px + 95px);
    margin-left: -95px;
    margin-right: -95px;
	padding-left: 0px;
	padding-right: 0px;
}
	.fullwidth, body.page .site-main > .hentry > .entry-content > .fullwidth {
		  max-width: calc(100% + 95px + 95px);
    margin-left: -95px;
    margin-right: -95px;
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Need to change single block font size on mobile’ is closed to new replies.

Tags