Making text different colours and adding margin/indent for mobile only

wing333

Hello Muffin,

1. I made colums, added text, but sometimes the background is a color and I want to make the text white. 

Can't fiind it and making all paragraph text a color is also not the solution. 

2. My columns work fine responsive, but on my phone there is no whitespace on the left side, no indent. 

How can I add this for mobile only? 

thanks,

Aris Houwing

Pablo

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

wing333

vcog.studiowing.nl

the homepage shows it all. I managed to get some text white with some code I found, but still don't know a way to increase the text indent for mobile only.

wing333

your header builder is great btw, it really helped me to make what I wanted. Are you guys updating and improving that plugin?

Pablo

I'm not sure what you mean by the color, can you explain it better?

About the indent, please apply some padding on horizontal and it will look nice

https://prnt.sc/t9n5dh

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

wing333

I hear you, but applying horizontal padding will also show on desktop. I'd like to show that on mobile only.

I fixed the color of text with some css already. 

Pablo

If you would like to see it only on mobile, you have to create separate section for mobile and desktop.

You can select on which device it should appear by getting in the section settings in the muffin builder.

There you will find the "Responsive Visibility" option, use it

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

wing333

That would mean I have to make all sections double which would increase page sizes a lot. Also, it would make pages huge in the backend. 

there has to be a piece of css for that. isn't there? 

Pablo

You would have to catch that section with CSS and apply the @media query rule to work only on mobile.

To attach an ID or Classname to section, please edit the section and provide name for it here:

https://prnt.sc/t9stxw

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

wing333

Well, that is not helping me. I have no idea where to start. 

Pablo

1) https://prnt.sc/t9stxw

2) https://www.w3schools.com/cssref/css_selectors.asp

3) https://www.w3schools.com/css/css_padding.asp

4) https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

You should be able to create the code with these documentations.

It look similar to:

@media (max-width:768px){ #yourelement{ padding:10px; }} 

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

wing333

Thanks! I'll look into it.