Changing width of pictures and text on phone

[astaa]

I am having some trouble with changing the layout when the website are viewed on phone…

I have tried to use the following:

@media screen and (max-width: 10px) {
.x-btn, .x-btn.x-btn-large{
font-size: 13x;
}
}

I just need the pictures to be bigger and the text to be reable?

Any advice on that?

http://astaa.dk/deling-fra-hjertet/

Cheers,
Astaa

[ruenel]

Hello There,

Thanks for writing in! Because of the margin and padding that you have added to the text element, it is being squeezed as you view the page in smaller screen size. I understand that you wanted to have a fullwidth page layout so that the image will become fullwidth and that is why you set it in your global settings to have a 100% width. This is not a good idea because you ended up adding margind and paddings to your text element so that it will stay at the center part of the screen.

To resolve your issue, please do the following:
1.) Please set the content layout as 90% or 88% and not the 100% which you currently have.
2.) For pages that you want to be fullwidth, please edit it and make use of the Blank - No Container | Header, Footer page templates.
3.) In your page, the image will be in a row with column container disabled.
4.) Your text element on the page should be placed in a separate row which the column container is enabled so that it will stay at the center align with your menu.

To know more about page templates in X theme, please check this out:

Features - Page Templates

Hope this helps.

[astaa]

It worked very well!!

Thanks!

The photos are perfectly sized on computer, but on phones they are very small.
Is there a way to change the size on small screens/phones?

Cheers,
Astaa

[christian]

Hey Astaa,

@astaa

Is there a way to change the size on small screens/phones?

If you mean changing the size of the image on the fly, that is not possible.

If you mean changing the size by showing a different image on phones, that is possible by using the Hide During Breakpoints feature. With that said, you need to:

1.) Go to the Customize tab of your Image element and hide it in phone view.

2.) Edit your image in an image service like Canva or program like Photoshop and add it to your page like you’ve added your first image.

3.) Hide the second image in Desktop, Laptop and Tablet views.

Thanks.

[astaa]

Thank you for the replies…
I got most of it…

The only thing is that the margin on phones are still very big on the phone (small screens)… Is there a way to change the width?

I does not seem to change anything when I use media width codes…
Have tried a few different ones…

Thanks!

[friech]

Hi There,

This margin looks fine to me?

If you need the content to go fullwidth, on your Additional CSS please look for this block:

.entry-wrap {
    padding: 0 60px;
}

And wrap it inside min-width: 480px media query.

e.g.

@media (min-width: 480px) {
	.entry-wrap {
    	padding: 0 60px;
	}
}

This way it won’t be applied on the small screens (480px and below)

Cheers!