offer different sizes for the link-boxes (venture theme) depending on the used device

Solved
Highlighted
New Member
10 0 0

I am trying to include different boxsizes which vary from desktop to smartphone.
The code only on theme.scss focussess on one general size no matter what device is used:

 

.link-block {
position: relative;
display: block;
@include display-flexbox();
justify-content: center;
padding: 100px 20px;
text-align: center;
flex: 1;
background: {
size: cover;
position: top center;
}

&:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $color-fixed-black;
opacity: 0;
transition: opacity 0.1s ease;
z-index: 1;
}

&:hover:after,
&:hover:focus {
opacity: 0.2;
}
}

.link-block__cta {
word-break: break-word;
z-index: 2;
position: relative;
}

.link-block-no-js {
position: relative;
display: block;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
justify-content: center;
text-align: center;
flex: 1;
}


The boxes look great on the desktop but are too big on the smartphone.
How can I change the code in a way so that it adjusts the size according to the used device?

Thanks in advance.

0 Likes
Highlighted

Hello @Simoncello,

Please share your site url so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
10 0 0

@oscprofessional wrote:

Hello @Simoncello,

Please share your site url so that I will give you exact solution


Sure!The website is www.roudbreck.lu 

0 Likes
Highlighted

@Simoncello,

Can you please screenshot that how you want it on smartphones

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
10 0 0

@Simoncello wrote:

@oscprofessional wrote:

Hello @Simoncello,

Please share your site url so that I will give you exact solution


Sure!The website is www.roudbreck.lu 


Okay with pleasure!Right now it looks like this
Screenshot_3.png

It takes almost the whole space on the smartphone.
I d prefer if it would look like that:

 

Screenshot_1.png

This is the view on the kindle fire. SO it should be so small that the boxes can be put next to eachother again. Thank you for your time.

0 Likes

Success.

Hello @Simoncello,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

@media screen and (max-width: 750px) {
#shopify-section-1558274191001 .flex__item.flex.medium-up--one-half {
	flex: 0 0 50%;
}
#shopify-section-1558274191001 .link-block {
	padding: 70px 20px;
}
}
@media screen and (max-width: 600px) {
#shopify-section-1558274191001 .link-block {
	padding: 50px 20px;
}
}
@media screen and (max-width: 480px) {
#shopify-section-1558274191001 .link-block {
	padding: 35px 20px;
}
#shopify-section-1558274191001 .emphasized-title {
	font-size: 1.5em;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
New Member
10 0 0

@oscprofessional wrote:

Hello @Simoncello,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

@media screen and (max-width: 750px) {
#shopify-section-1558274191001 .flex__item.flex.medium-up--one-half {
	flex: 0 0 50%;
}
#shopify-section-1558274191001 .link-block {
	padding: 70px 20px;
}
}
@media screen and (max-width: 600px) {
#shopify-section-1558274191001 .link-block {
	padding: 50px 20px;
}
}
@media screen and (max-width: 480px) {
#shopify-section-1558274191001 .link-block {
	padding: 35px 20px;
}
#shopify-section-1558274191001 .emphasized-title {
	font-size: 1.5em;
}
}

Wow amazing it worked like a charm!I love it!And was the first time EVER that I've got such a quick and efficient help from someone!I ll take note of your company. 
Have a great day!:)

0 Likes