How to adapt mobile design on cornerstone?

Support
#1

Hello team,

Everytime I change a design on mobile, it changes the placement on desktop. How can I edit mobile version only?

Also, How can I hide certain images/text on mobile?

Thanks in advance!

#2

Hey @GenP,

This depends on the current setup of your website. Would you mind providing the link to the page in question so that we could check it?

You can make use of the Hide During Breakpoints option for the elements that you can find in the customize settings.

Hope this helps.

#3

Hey Jade,

Yes, the url is generationp.com but its under construction.

Let me know if I need to provide the user ID.

Many thanks,
Yara

#4

Also, I’m not getting the same option under “inspector”

See attached please:

#5

I’m also working on another website lagotacirco.com

This button “follow” (attached) is not placed right on mobile format. How can I change it without affecting laptop view?

#6

Hey Yara,

The options I have mentioned are for V2 elements. If you are using a classic element such as the Classic Image element, you will see fewer options.

For the classic elements do not have the Hide During Breakpoint option. Only the classic section and classic row has the Hide based on screen width option:

I could see that you have added some margins to force the button to align with the text above it.

Try setting the margins or the button to 0 instead. Once you do that, the button will be centered in its container so to align it to the left, select the button then click on the column settings then set the text alignment setting to left.

Hope this helps.

#7

Thanks Jade.

I used the margins because the “Text alignment” is not working.

I tried it again, i put the margin at 0 and clicked on left alignment and nothing happened.

Can you please help?

#8

Hi @GenP,

I checked the settings of the column that contains the elements and the text alignment is not set to anything so kindly make sure you have set the text alignment to the column. Also, the text alignment set to the section setting is set to center so you can also try setting it to left instead:

If you are still not able to get it sorted, please provide us with the admin access to your site in a Secure Note:

#9

Hey Jade,
Excuse my ignorance.
On my screen, the text is set to the right (attached)
I’ll send you my login details anyhow so you can take close look.
Many thanks

#10

Hello @GenP,

The text element will only align the texts inside the element. If you want to change the position of the button, you will need to adjust the text format of the column to the left. You can find it in the column settings.

Hope this helps.

#11

Hi RueNel,
I can’t find the column settings. Could you please elaborate?
Thanks

#12

Hi @GenP,

It is the first section’s text-align option that is inherited by the button so you need to change the first section’s align-text option to left.

But since you do not want to affect the desktop view and only want to text-align left on tablet/mobile, please add this to your Page > CSS area

@media (max-width: 767px) {
	#x-section-1 {
		text-align: left !important;
	}
}

Regarding this issue,



Do you have a big screen? This is not happening on our end, the content of the page and header logo is aligned, the only thing I can think of that will cause this issue on your end is the fade effect option on the column.


Try to turn that off. The column can be inspected by clicking this.


To clarify, if your page text content aligns with logo, then that is not an issue.

Hope it helps,
Cheers!

#13

Hi Friech,
Thank you for your detailed reply.

I don’t have this fade option. I only have the pattern and parallax option (attached)

I’ll send you my login in secure note.

Cheers
Yara

#14

Continuation of the shot:

#15

On my other website, I integrated the code that you sent so desktop doesn’t affect mobile view but it still is.

I am trying to decrease the headline text size on mobile view because it goes out of alignment.

Any other suggestions?

Many thanks for your help!

#16

Hi @GenP,

The Screenshot you showed above is Section, please inspect your Column, because Fade effect option is in Column

No, please remove that from your other site, that code is for that specific page only, that’s why I ask to put that in Page > CSS area only.

This issue is different, this is not just the font-size, the big part of this issue is the huge (7.5em) margin you applied on that section, see that orange area that is the margin and that narrow area in the middle is what is left for the content. You might want to remove that margin. You can achieve that same design without compromising the mobile view, by utlizing the ROW’s max-width option and SECTION’s top and bottom padding.



We kindly ask, If you have a follow-up question with your other site (generationp), please write that on a separate thread to avoid confusion.

Thanks,

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.