In Wishpond, normally it is not possible to have varying size of objects per view mode (screen sizes). So when texts are added to the page, it has the same font size on Desktop, Tablet and Phone and if you resize the font size in one mode say Phone, it also changes in the Desktop mode.

It is possible to set different font sizes in different screen sizes by using Media Query CSS codes.

Here are the different media query code formats per screen size and device:

/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
//CSS
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px

*/
@media (min-width: 320px) and (max-width: 480px) {
//CSS
}

For example if you have a text element on a landing page and it has a font-size of say 32px on Desktop and it is too big for mobile so you want to set it as 18px on mobile, you will need to add the following code:

@media only screen and (max-width: 768px) {
/* For mobile phones: */
#wpcText_5092122 span{
font-size:18px;
}
}

Here the first part of the code is the media query CSS coding for the screen size and in the CSS code we have added the CSS ID of the element followed by span and then set the font size as 18px. So when the page is loaded on a device with a max screen size of 768px, it will make the font size of that piece of text 18px, while on bigger screen sizes it will load in the normal 32px that is set up in the main editor.

SImilarly other CSS codes can be used to change color, set size, position, etc. of objects in different screen sizes.
Was this article helpful?
Cancel
Thank you!